javascript 如何在较小的设备上停止 WOW JS + CSS 动画？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28626836/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to stop WOW JS + CSS animate on smaller devices?
提问by ZAD
1) I've looked all over th web and just was wondering if anyone of you guys come across this problem where you wanted to stop the WOW JS animation for certain devices or/and for smaller screen sizes?!
1）我已经浏览了整个网络，只是想知道你们中是否有人遇到过这个问题，您想停止某些设备或/和较小屏幕尺寸的 WOW JS 动画？！
2) Also it's quite annoying to see css the animation from time to time when navigating through out the website (ux-wise would be ideal to see it once), so I was thinking to use cookies for this purpose but didn't know how to approach it, because by the time JS file is loaded at the bottom of the page the animation has been done...?!
2）在浏览网站时不时看到 css 动画也很烦人（ux-wise 最好能看到一次），所以我想为此目的使用 cookie，但不知道如何接近它，因为在页面底部加载 JS 文件时，动画已经完成......？！
Please bear in mind that I also use the data attributes for delays and durations, so it's not only by removing the WOW class!
请记住，我还将数据属性用于延迟和持续时间，因此不仅仅是删除 WOW 类！
Any idea would really be appreciated :) Many thanks
任何想法都将不胜感激:) 非常感谢
采纳答案by ZAD
Hope this helps others too;
希望这对其他人也有帮助；
$('.wow').removeClass('wow');
Place this at the bottom of your page, however for those that want to remove the WOW JS animation for certain devices then this is for you;
把它放在页面底部，但是对于那些想要删除某些设备的 WOW JS 动画的人来说，这是给你的；
if(isMobile || isTablet) {
$('.wow').addClass('wow-removed').removeClass('wow');
} else {
$('.wow-removed').addClass('wow').removeClass('wow-removed');
}
Put the logic behind isMobile and isTablet yourself, and I'm sure everybody's are able to do that.
将逻辑置于 isMobile 和 isTablet 背后，我相信每个人都能够做到这一点。
Thanks
谢谢
回答by Samuel
Change the default settings
更改默认设置
wow = new WOW(
{
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0, // default
mobile: true, // default
live: true // default
}
)
wow.init();
to
到
mobile:false
回答by gwenaelle georget
a pure css solution would be (even if !important is quite ugly...) :
纯 css 解决方案将是（即使 !important 非常丑陋......）：
@media screen and (max-width: 800px) {
.wow{
animation-name: none !important;
visibility: visible !important;
}
}
The inline styles added by wow will still be there but overwritten by these 2 lines, they won't apply anymore.
wow 添加的内联样式仍然存在，但被这两行覆盖，它们将不再适用。
回答by que1326
.wow {
visibility: visible !important;
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
}
回答by Etienne Dupuis
For one-liner addicts like me:
对于像我这样的单线瘾君子：
new WOW({ mobile:false }).init();
回答by Jithin PV
This is the Right One. put the code before "wow" script
这是正确的。将代码放在“哇”脚本之前
if ($(window).width() <= 991){
$(".wow").removeClass("wow");
}
if ($(window).width() <= 991){
$(".wow").removeClass("wow");
}
