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

【问题标题】：How to stop WOW JS + CSS animate on smaller devices?如何在较小的设备上停止 WOW JS + CSS 动画？
【发布时间】：2020-02-26 00:23:16
【问题描述】：

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

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

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

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

【问题讨论】：

在花了很多时间之后，我回到了第1方，这是我用过的，如果有人知道更好的解决方案，请告诉我们:) JS解决方案->> > $('.wow').removeClass('wow');

标签： javascript jquery responsive-design wow.js

【解决方案1】：

更改默认设置

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

到

mobile:false

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

我使用了这个 css，它在 chrome 动画中的工作停止了。但在 iphone safari 浏览器动画钢铁作品（动画不停止）。
.wow{visibility: visible !important;-webkit-animation-name: none !important;-o-animation-name: none !important;animation-name: none !important;} 这可能有效——只是为动画名称添加了前缀。

【解决方案3】：

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

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

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

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

isMobile 和 isTablet 背后的逻辑你自己写，我相信每个人都能做到。

谢谢

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您正在为将来的读者回答问题，而这些人可能不知道您的代码建议的原因。也请尽量不要用解释性 cmets 挤满你的代码，因为这会降低代码和解释的可读性！

【解决方案6】：

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

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

【讨论】：