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

Question

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

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

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

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

Answer 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>