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

有一个较短的解决方案，每次都必须刷新动画元素。

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

这样，您就可以在该元素上再次运行动画。

Answer 3

用鼠标运行，进入和退出：

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

根据鼠标的悬停(输入/退出)动作添加和删除动画类。退出项目后，类将不处于活动状态。

如果有人在动画完成之前多次悬停/退出，.stop()将停止动画多次重复。