10

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

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

请记住，我还将数据属性用于延迟和持续时间，所以这不仅仅是通过删除 WOW 类！

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

4

6 回答 6

18

更改默认设置

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

至

mobile:false
于 2016-02-16T09:22:32.787 回答
8

一个纯 css 解决方案将是（即使 !important 非常难看......）：

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

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

于 2015-06-08T16:09:38.060 回答
7

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

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

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

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

自己把isMobile和isTablet背后的逻辑放在后面，我相信每个人都能做到。

谢谢

于 2015-04-14T17:19:26.043 回答
3

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

new WOW({ mobile:false }).init();
于 2020-02-25T16:23:16.523 回答
0 
.wow {
 visibility: visible !important;
 -webkit-animation: none !important;
 -moz-animation: none !important;
 -o-animation: none !important;
 -ms-animation: none !important;
 animation: none !important;
}
于 2016-08-12T12:16:52.427 回答
-1

这是正确的。将代码放在“哇”脚本之前

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

于 2018-04-26T06:06:12.843 回答