我正在尝试每次按下按钮时重现特定的动画。
具体来说,我正在使用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;
}