animate.css: 重复动画

Question

我正在使用 animate.css 制作一些动画。如果发生错误，元素应该反弹：

$target.addClass('animated bounce');

效果很好。但是如果用户在做同样的事情，就不会有第二个动画，因为类已经添加了。

所以我尝试像这样删除动画后的类：

$target.addClass('animated bounce');
setTimeout(function(){
    $target.removeClass('animated bounce');
}, 1000);

我的问题是，是否应该这样做（我不知道动画到底有多长），或者是否有其他重复动画的解决方案？

Answer 1

您需要这样做：

$('#target').removeClass().addClass('bounce animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
    $(this).removeClass();
});

$('#target') 在这种情况下是您的元素的 ID，请根据您的需要更改它。

Answer 2

运行鼠标进入并退出：

 $target.stop().toggleClass('animated bounce');

根据鼠标悬停 (enter/exit) 动作添加和删除动画 class。退出项目后 class 将不会保持活动状态。

如果有人在动画完成前hovers/exits多次，.stop() 将阻止动画重复多次。

Answer 3

有一个更短的解决方案，你必须每次 'refresh' 动画元素

function refreshElement(id){
   var el = $(id);
   el.before( el.clone(true) ).remove();
}

这样你就可以运行再次在该元素上播放动画

animate.css: 重复动画

animate.css: repeating animations

css

animation

animate.css