CSS 动画 onClick

Posted 2023-02-22

【中文标题】CSS 动画 onClick

【英文标题】：CSS Animation onClick

【发布时间】：2011-06-18 09:26:27

【问题描述】：

如何让 CSS 动画与 javascript onClick 一起播放？我目前有：

.classname 
  -webkit-animation-name: cssAnimation;
  -webkit-animation-duration:3s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;

@-webkit-keyframes cssAnimation 
  from 
    -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(100px);
  
  to 
    -webkit-transform: rotate(0deg) scale(2) skew(0deg) translate(100px);
  

如何应用 onClick？

【参考方案1】：

您可以通过绑定 onclick 侦听器然后添加 animate 类来实现这一点，如下所示：

$('#button').onClick(function()
    $('#target_element').addClass('animate_class_name');
);

【讨论】：

基本上，您要告诉 jQuery 执行以下操作： 第一行：jQuery 以具有按钮 ID 的元素为目标，并在用户单击该元素时创建一个函数。第二行：这是将受到点击影响的元素。它以 id 为 target_element 的元素为目标，并将类 animate_class_name 添加到该元素。相信我，这个解决方案很有效，我过去用过。

【参考方案2】：

您只需使用:active pseudo-class。这是在您单击任何元素时设置的。

.classname:active 
    /* animation css */

【讨论】：

啊，我误解了你的问题。我认为在这种情况下，Ravi 的回答对你有用。

这对我很有用。它仅在用户按住鼠标按钮时才运行动画，这正是我所需要的。

这也是我需要的。

感谢您的回答，这正是我想要的。

【参考方案3】：

您确定只在 webkit 上显示您的页面吗？这是在 safari 上传递的代码。 点击按钮后图片(id='img')会旋转。

function ani() 
  document.getElementById('img').className = 'classname';

.classname 
  -webkit-animation-name: cssAnimation;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;


@-webkit-keyframes cssAnimation 
  from 
    -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(100px);
  
  to 
    -webkit-transform: rotate(0deg) scale(2) skew(0deg) translate(100px);
  

<input name="" type="button" onclick="ani()" value="Click">
<img id="img" src="https://i.stack.imgur.com/vghKS.png"   />

【讨论】：

请注意，使用.className 会清除给定元素上的所有其他类。如果不希望这样做，请使用document.getElementById('img').classList.add('classname');

【参考方案4】：

试试这个：

<div>
 <p onclick="startAnimation()">Start</p><!--O botão para iniciar (start)-->
 <div id="animation">Hello!</div> <!--O elemento que você quer animar-->
</div>

<style>
@keyframes animationName 
from margin-left:-30%;

</style>

<script>
function startAnimation() 
    document.getElementById("animation").style.animation = "animationName 2s linear 1";

</script>

【参考方案5】：

添加一个

-webkit-animation-play-state: paused;

到你的 CSS 文件，然后你可以使用这个 JS 行来控制动画是否正在运行：

document.getElementById("myDIV").style.WebkitAnimationPlayState = "running";

如果您希望动画在每次单击时运行一次。记得设置

-webkit-animation-iteration-count: 1;

【参考方案6】：

您可以使用以下代码来做到这一点

$('#button_id').on('click', function()
$('#element_want_to_target').addClass('.animation_class'););

【参考方案7】：

var  abox = document.getElementsByClassName("box")[0];
function allmove()
        abox.classList.remove("move-ltr");
        abox.classList.remove("move-ttb");
       abox.classList.toggle("move");

function ltr()
        abox.classList.remove("move");
        abox.classList.remove("move-ttb");
       abox.classList.toggle("move-ltr");

function ttb()
       abox.classList.remove("move-ltr");
       abox.classList.remove("move");
       abox.classList.toggle("move-ttb");

.box 
  width: 100px;
  height: 100px;
  background: red;
  position: relative;

.move
  -webkit-animation: moveall 5s;
  animation: moveall 5s;

.move-ltr
   -webkit-animation: moveltr 5s;
  animation: moveltr 5s;

.move-ttb
    -webkit-animation: movettb 5s;
  animation: movettb 5s;

@keyframes moveall 
  0%   left: 0px; top: 0px;
  25%  left: 200px; top: 0px;
  50%  left: 200px; top: 200px;
  75%  left: 0px; top: 200px;
  100% left: 0px; top: 0px;

@keyframes moveltr 
  0%    left: 0px; top: 0px;
  50%  left: 200px; top: 0px;
  100% left: 0px; top: 0px;

@keyframes movettb 
  0%   left: 0px; top: 0px;
  50%  top: 200px;left: 0px;
  100% left: 0px; top: 0px;

<div class="box"></div>
<button onclick="allmove()">click</button>
<button onclick="ltr()">click</button>
<button onclick="ttb()">click</button>

【参考方案8】：

在css-tricks找到解决方案

const element = document.getElementById('img')

element.classList.remove('classname'); // reset animation
void element.offsetWidth; // trigger reflow
element.classList.add('classname'); // start animation

【讨论】：

在中间线触发回流是一个绝妙的技巧。正是我需要的

【参考方案9】：

CSS ONLY 解决方案适用于每次点击并将动画播放到最后：

您所要做的就是将动画添加到:focus 伪类中，并在:active 伪类中将其设置为none。

如果您的元素不可聚焦，请将 tabindex="0" 属性添加到 html 元素：

@keyframes beat 
  0% 
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  
  100% 
    -webkit-transform: scale(0.8,0.8);
            transform: scale(0.8, 0.8);
  

.className 
  background-color:#07d;  
  color: #fff;
  font-family: sans-serif;
  font-size: 20px;
  padding: 20px;
  margin:5px;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);

.className:focus 
  -webkit-animation: beat 1s ease-in-out backwards;
          animation: beat 1s ease-in-out backwards;

.className:active 
  -webkit-animation: none;
          animation: none;

body 
  text-align: center;
 

<h3>Any element with tabindex="0", like a div:</h3>
<div tabindex="0" class="className"> Click me many times!</div>
<h3>Any focusable element like a button:</h3>
<button class="className"> Click me many times!</button>

【讨论】：

我看到的一个问题：如果我单击任一演示控件，然后切换选项卡，然后切换回来，动画就会播放而无需单击它。