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');

动画类已添加＆amp;基于鼠标悬停（进入/退出）动作删除。退出项目后，该课程不会保持活动状态。

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

animate.css：重复动画

3 个答案: