jQuery + Animate.css 动画只工作一次，动画不重置

Posted 2023-03-06

【中文标题】jQuery + Animate.css 动画只工作一次，动画不重置

【英文标题】：jQuery + Animate.css animation only working once, animation not resetting

【发布时间】：2015-04-19 07:07:18

【问题描述】：

我试图在每次按下按钮时重现特定动画。

具体来说，我使用jQuery 和animate.css 库来实现此效果：单击按钮时，将一个类（准确地说是两个类：fadeInDown animated）添加到我想要动画的元素中。

动画确实可以正常工作，但只有一次。这是为什么呢？

小提琴：http://jsfiddle.net/jqm4vjLj/2/

我希望每次单击按钮时都重置动画，即使上次单击已完成一半。每当我单击按钮时，它也应该可以工作，而不仅仅是一次。

JS：

$("#button").click(function () 
    $("#button").removeClass();
    $("#button").addClass("fadeInDown animated");
);

animate.css 中的类：

@-webkit-keyframes fadeInDown 
  0% 
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  

  100% 
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  


@keyframes fadeInDown 
  0% 
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  

  100% 
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  


.fadeInDown 
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;


.animated 
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

【参考方案1】：

更安全的方法是使用动画结束事件，例如

$("#button").click(function() 
  $("#button").addClass("fadeInDown animated").one('animationend webkitAnimationEnd oAnimationEnd', function() 
    $("#button").removeClass();
  );
);

#button 
  height: 30px;
  width: 120px;
  border: 1px solid black;

.animated 
  -webkit-animation-duration: 1s;
  animation-duration: 1s;

@-webkit-keyframes fadeInDown 
  0% 
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  
  100% 
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  

@keyframes fadeInDown 
  0% 
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  
  100% 
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  

.fadeInDown 
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="button"></div>

【讨论】：

啊，这似乎是我要找的。您能解释一下为什么在动画前后重复 .removeClass() 方法吗？

@Tiago 忘了删除它...不需要

感谢@Arun 的出色回答，但我决定接受 bgoldst 的建议。它完全符合我的要求。

这感觉比克隆整个元素要干净得多

【参考方案2】：

参见http://css-tricks.com/restart-css-animation/，它讨论了这个确切的问题。

我认为最干净的解决方案是将删除元素并将其重新插入到全局函数中 html 树中的相同位置的功能包装起来。然后，当你想重新开始动画时，你只需删除类，调用重置函数（从返回值中获取新插入的元素），然后重新添加动画类以重新开始动画。

例如：

function reset($elem) 
    $elem.before($elem.clone(true));
    var $newElem = $elem.prev();
    $elem.remove();
    return $newElem;
 // end reset()

$("#button").click(function () 
    var $this = $(this);
    $this.removeClass();
    $this = reset($this);
    $this.addClass("fadeInDown animated");
);

http://jsfiddle.net/jqm4vjLj/6/

此解决方案提供了最大的响应能力，因为当动画元素被销毁时，旧的正在进行的动画会自动结束，而新插入的元素的动画会立即开始。

【讨论】：

这太棒了。在这个线程中有很好的答案，但这段代码绝对符合我的要求。谢谢。

我写了同样的答案，但被打败了！其他答案都不是正确的，因为它们都在等待动画完成，当@Tiago 说即使没有完成它也应该重新启动。

@blex 完全正确。我真的很高兴找到如此精确的解决方案。谢谢大家。

【参考方案3】：

对我来说简单的解决方案是在添加类之前开始回流过程。 例如，您可以通过“更改”元素的宽度来做到这一点。我认为浏览器的回流过程比重新插入节点更快。而且它在编码方面更简单。 在 jQuery 中：

$(this)
  .removeClass('myAnimation')
  .width('auto') // the magic
  .addClass('myAnimation')

【讨论】：

我有一个自定义宽度。所以我所做的就是隐藏然后显示

【参考方案4】：

动画完成后需要移除类，

但是直接使用removeClass是不行的，因为它不会让动画完成，而是使用setTimeout

看到这个http://jsfiddle.net/jqm4vjLj/4/

   $("#button").click(function () 

        $("#button").addClass("fadeInDown animated");
        setTimeout(function() $("#button").removeClass("fadeInDown animated");,100)
    );

【参考方案5】：

问题是它立即删除类，然后添加类，所以我只是添加了带有 button2 id 的新 div，单击它只是删除类，然后再次单击按钮 div 它会动画。

所以问题是你需要在动画完成后做。

$("#button1").click(function () 
    $("#button").removeClass();
);

小提琴在这里：http://jsfiddle.net/jqm4vjLj/5/

【讨论】：

有趣。但是，这不符合我的要求。让用户重置动画是行不通的。你是说我需要做的是设置一个超时以允许动画在删除类之前完成？

@Tiago 是的，我的意图是这样，但你应该接受 Arun 的回答，他很棒。很好的答案...！

【参考方案6】：

也许这是解决您问题的好方法：

https://jsfiddle.net/d2c16fk7/3/

在您的 javascript 中，.animation 和 .fadeInDown 类被添加到 #button 中，之后您拥有这些类，您无法再次添加它。

【参考方案7】：

这对我有用，来自 animate.css github：

animateCss: function (animationName) 
    var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
    $(this).addClass('animated ' + animationName).one(animationEnd, function() 
        $(this).removeClass('animated ' + animationName);
    );

【参考方案8】：

要重置元素，我们必须让 css 重新计算，对吗？所以我所做的是隐藏然后显示元素。我所做的是 removeClass() 然后 hide() 然后 show() 和 addClass()

$("#button").click(function () 
    $("#button").removeClass("fadeInDown animated").hide();
    $("#button").show().addClass("fadeInDown animated");
);