如何在较小的设备上停止 WOW JS + CSS 动画？

Question

1) 我浏览了整个网络，只是想知道你们中是否有人遇到过要停止某些设备 or/and 较小屏幕尺寸的 WOW JS 动画的问题？ !

2) 在浏览网站时不时看到 css 动画也很烦人（ux-wise 最好看一次），所以我想使用 cookie为此目的但不知道如何处理它，因为在页面底部加载 JS 文件时动画已经完成...?!

请记住，我还使用延迟和持续时间的数据属性，所以它不仅仅是通过删除 WOW class!

任何想法都将不胜感激:) 非常感谢

Answer 1

希望这对其他人也有帮助；

$('.wow').removeClass('wow');

将它放在页面底部，但是对于那些想要删除某些设备的 WOW JS 动画的人来说，这是给你的；

if(isMobile || isTablet) {
    $('.wow').addClass('wow-removed').removeClass('wow');
} else {
    $('.wow-removed').addClass('wow').removeClass('wow-removed');
}

自己把 isMobile 和 isTablet 的逻辑写出来，相信大家都能做到。

谢谢

Answer 2

一个纯粹的 css 解决方案是（即使 !important 非常丑陋...）：

@media screen and (max-width: 800px) {
    .wow{
        animation-name: none !important;
        visibility: visible !important;
    }
}

wow 添加的内联样式仍然存在，但被这两行覆盖，它们将不再适用。

Answer 3

更改默认设置

wow = new WOW(
{
boxClass:     'wow',      // default
animateClass: 'animated', // default
offset:       0,          // default
mobile:       true,       // default
live:         true        // default
}
                )
wow.init();

至

mobile:false

Answer 4

.wow {
 visibility: visible !important;
 -webkit-animation: none !important;
 -moz-animation: none !important;
 -o-animation: none !important;
 -ms-animation: none !important;
 animation: none !important;
}

Answer 5

这是正确的。将代码放在 "wow" 脚本

之前

if ($(window).width() <= 991){ $(".wow").removeClass("wow"); }

Answer 6

对于像我这样的单线瘾君子：

new WOW({ mobile:false }).init();

如何在较小的设备上停止 WOW JS + CSS 动画？

How to stop WOW JS + CSS animate on smaller devices?

javascript

jquery

responsive-design

wow.js