使用 WOW.js 可以看到隐藏的 div
Hidden divs are visible using WOW.js
我有一些部分(div)隐藏在桌面上并显示在移动设备上,但由于它们都有触发 wowjs 的 class,它会显示可见性:当您到达该部分时可见,因此使隐藏的 div 在桌面上也可见。如果有什么办法解决这个问题?我希望所有 div 都具有动画效果,但如果您不在移动设备上,它们应该保持隐藏状态。
var wow = new WOW( {
boxClass: 'animate'
} );
它对我来说工作正常,请检查下面的工作片段:
wow = new WOW(
{
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0, // default
mobile: true, // default
live: true // default
}
)
wow.init();
body{
overflow-x: hidden;
}
.mobile-show{
display: none;
}
@media all and (max-width:767px){
.mobile-show{
display: block;
}
.mobile-hide{
display: none;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" rel="stylesheet"/>
<h1 class="wow fadeInLeft">
Hello
</h1>
<h1 class="wow fadeInLeft">
World
</h1>
<h1 class="wow fadeInLeft mobile-show">
Hello Mobile
</h1>
<h1 class="wow fadeInLeft mobile-hide">
Hello Desktop
</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
我有一些部分(div)隐藏在桌面上并显示在移动设备上,但由于它们都有触发 wowjs 的 class,它会显示可见性:当您到达该部分时可见,因此使隐藏的 div 在桌面上也可见。如果有什么办法解决这个问题?我希望所有 div 都具有动画效果,但如果您不在移动设备上,它们应该保持隐藏状态。
var wow = new WOW( {
boxClass: 'animate'
} );
它对我来说工作正常,请检查下面的工作片段:
wow = new WOW(
{
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0, // default
mobile: true, // default
live: true // default
}
)
wow.init();
body{
overflow-x: hidden;
}
.mobile-show{
display: none;
}
@media all and (max-width:767px){
.mobile-show{
display: block;
}
.mobile-hide{
display: none;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" rel="stylesheet"/>
<h1 class="wow fadeInLeft">
Hello
</h1>
<h1 class="wow fadeInLeft">
World
</h1>
<h1 class="wow fadeInLeft mobile-show">
Hello Mobile
</h1>
<h1 class="wow fadeInLeft mobile-hide">
Hello Desktop
</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>