Question

1）我看过整个网络，只是想知道你们是否有人遇到过这个问题，你想停止某些设备或/和更小屏幕尺寸的WOW JS动画？！

2）同时在浏览网站时不时看到css动画是非常烦人的（ux-wise是理想的一次看到它），所以我想为此目的使用cookie但是没有'我知道如何处理它，因为当JS文件加载到页面底部时动画已经完成......？！

请记住，我还将数据属性用于延迟和持续时间，因此不仅要删除WOW类！

任何想法真的很感激:) 非常感谢

Answer 1

更改默认设置

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

到

mobile:false

Answer 2

一个纯粹的CSS解决方案（即使！重要的是非常难看......）：

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

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

Answer 3

希望这也有助于其他人;

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

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

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

把逻辑放在isMobile背后，并且自己是，但我相信每个人都能做到这一点。

由于

Answer 4

对于像我这样的一线瘾者：

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

Answer 5

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

Answer 6

这是正确的。把代码放在＆＃34;哇＆＃34;脚本

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

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

6 个答案: