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

Question

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

具体来说，我正在使用 jQuery 和 animate.css 库来实现此效果：单击按钮时，会添加一个 class（两个 class 是精确：fadeInDown animated) 到我要设置动画的元素。

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

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

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;
}

Answer 1

动画完成后需要移除class，

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

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

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

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

Answer 2

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

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

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

fiddle 在这里：http://jsfiddle.net/jqm4vjLj/5/

Answer 3

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

$("#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>

Answer 4

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

我认为最干净的解决方案是将移除元素并将其重新插入到 HTML 树中相同位置的功能包装在一个全局函数中。然后，当你想重新开始一个动画时，你只需删除class，调用重置函数（从return值中抓取新插入的元素），然后添加动画class(es) 返回以再次开始动画。

例如：

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/

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

Answer 5

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

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

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

Answer 6

我的简单解决方案是在添加 class 之前启动回流过程。例如，您可以通过元素的 "change" 宽度来做到这一点。我认为浏览器的回流过程比节点重新插入更快。而且它在编码方面更简单。在 jQuery:

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

Answer 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);
    });
}

Answer 8

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

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

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

jQuery + Animate.css animation only working once, animation not resetting

javascript

css

jquery

animation