animate.css：重复动画

Posted 2023-03-06

【中文标题】animate.css：重复动画

【英文标题】：animate.css: repeating animations

【发布时间】：2016-03-12 13:25:38

【问题描述】：

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

$target.addClass('animated bounce');

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

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

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

我的问题是，如果应该这样做（我不知道动画到底有多长），还是有另一种重复动画的解决方案？

【问题讨论】：

不确定我是否 100% 关注你，但如果使用 animate.css 来重复动画，你可以添加以下 CSS 来强制重复：#yourElement -vendor-animation-iteration-count:infinite ; （如果你想设置特定数量的重复动画，请在此处使用一个数字） 或者，如果你想无限重复，你可以这样设置： 其中 - vendor- 是供应商前缀

【参考方案1】：

你需要这样做：

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

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

【讨论】：

'one' 应该是 'on' 吗？还有 'oanimationend' -> 'onanimationend'？

不，您只是在错误事件中使用它。每次发生错误时都会启动这个小脚本。 animate.css 的制作者也建议这样做。您只需要更改目标 id。

好的，但是我必须使用one()，因为在添加类之前总是会删除它们...？

是的，您必须使用 .one()。这是一个 jquery 事件。这个事件实际上是在调用 animate.css 自定义事件。您不需要任何 Timeout()。

@user3142695 如果这对你有用，请考虑投票给我的答案

【参考方案2】：

有一个更短的解决方案，你必须每次都“刷新”动画元素

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

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

【参考方案3】：

在鼠标进入和退出时运行：

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

动画类的添加和删除基于鼠标的悬停（进入/退出）动作。退出项目后，该类将不会保持活动状态。

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

【讨论】：

你能解释一下修复的作用吗？

@Phani 根据鼠标悬停（进入/退出）动作添加和删除动画类。退出项目后，该类将不会保持活动状态。

如果您可以在答案中添加相同的内容，它会更加清晰。谢谢。