animate.css动画抖动,Animate.css抖动效果每次都不工作

我正在制作一个Twitch Streamer应用程序，该应用程序使用Twitch API为一组预定义的拖放器提取一些数据。Animate.css抖动效果每次都不工作

我有三个按钮来选择所有/在线/离线频道，并且我正在为所有这些按钮添加animated shake效果。

在我第一次尝试时，我做了一个简单的if/else检查，以使shake正常工作 - 检测animated shake类是否已经存在，如果是，请将其删除，然后重新添加。否则，只需添加它。

这没有奏效。我在这里找到了一个答案，表示它不会那样工作，因为addClass和removeClass发生得如此之快以至于DOM没有时间赶上。

然后我用一个queue一个匿名函数要添加的类别后引起轻微的延迟后回removeClass -

if ($(this).hasClass("animated shake")) {

$(this).removeClass("animated shake").delay(50).queue(

function() {

$(this).addClass("animated shake");

});

//$(this).addClass("animated shake");

} else {

$(this).addClass("animated shake");

}

现在，防抖效果就像中90％的时间，但如果你不断在线/离线频道之间来回切换，会出现摇晃不起作用的情况。

以下是Codepen上的应用程序。

我会很感激任何帮助，为什么它不工作每一次。

注 - 摇动效果现在只在在线/离线按钮上。

animate.css动画抖动,Animate.css抖动效果每次都不工作相关推荐

超棒的跨浏览器纯CSS动画实现 - Animate.css
为什么80%的码农都做不了架构师?>>> 日期:2012-8-12 来源:GBin1.com 在线演示本地下载通常情况下如果需要生成web动画效果的话,我们肯定会考虑使 ...
过山车css动画,如何使用CSS实现过山车loader的动画效果
本篇文章给大家带来的内容是关于如何使用CSS实现过山车loader的动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览代码解读定义 dom,容器中包含 3 个元素, ...
css动画结束闪烁,CSS秘密花园：闪烁动画
<CSS Secrets>是@Lea Verou最新著作,这本书讲解了有关于CSS中一些小秘密.是一本CSSer值得一读的一本书,经过一段时间的阅读,我.@南北和@彦子一起将在W3cplu ...
css 动画重播,Animate.CSS重播？
这只是一个猜测,但现在看来,jQuery是不是"结束"去除类它添加回来之前,我知道这是没有意义的,但它的JavaScript是如何工作的.它可以调用链中的下一个函数,然后第一个函数 ...
css 动画类库Animate.css
地址为:http://daneden.github.io/animate.css/ 源码地址为:https://github.com/daneden/animate.css 简单的使用方法: Anim ...
css动画之旅--弹性菜单效果
今天学习了一个css实现弹性菜单的效果,感觉还不错. 闲话不说,直接上代码.... 下面是页面的HTML代码: 1 <div class="menu"> 2 <d ...
反向的css动画,反向使用CSS动画（通过重置状态？）
小编典典不,没有办法单独使用CSS重新启动动画.您必须使用JavaScript从元素中删除动画,然后将其重新应用到元素(经过延迟)以重新启动. 以下是[W3C的CSS3动画规范说的(在不同的上下文中 ...
ios css动画残影,CSS 过渡动画在IOS中表现异常
设置了一个隐藏的圆环,在页面开始时旋转露出.发现在IOS(safari)中过渡动画展示不完整,只展示了起始部分,后面直接跳转到结束状态了. demo .wrap { width: 200px; hei ...
[京东实践干货]手把手教你实现「京喜工厂」的CSS动画效果
0 契机与背景今年Q1(2020年第一季度)参与了京喜事业部「京喜工厂」业务的前端开发.用户可以通过「京喜工厂」参与口罩.抽纸.大米等商品的"在线生产",既能趣味造物,又能免费领 ...

animate.css动画抖动,Animate.css抖动效果每次都不工作

animate.css动画抖动,Animate.css抖动效果每次都不工作相关推荐

最新文章

热门文章