css - animate.css:重复动画

标签 css animation animate.css

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

$target.addClass('animated bounce');

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

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

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

我的问题是,是否应该这样做(我不知道动画到底有多长),或者是否有重复动画的另一种解决方案?

最佳答案

你需要这样做:

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

$('#target') 在本例中是您元素的 ID,请根据您的需要更改它。

关于css - animate.css:重复动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34142104/

相关文章:

javascript - 如何使用 JavaScript 为动态文本制作动画?

css - Animate.css 和 Angular 4

html - 如何在谷歌地图信息中添加标签?

css - 如何使用子隐藏内包装空白?

css - 为什么我的超链接不改变颜色或加下划线?

ios - Swift 3 - 按钮动画向右跳转

css - 停止在 CSS 中生成不需要的滚动

CSS 性能 : Should . 通过 Assets 域提供 css 文件?

javascript - 将按钮变成加载圆圈动画

c++ - Windows:是否有我可以作为 Visual C++ 资源引用的内置加载动画?