【问题标题】:Hidden divs are visible using WOW.js使用 WOW.js 可以看到隐藏的 div
【发布时间】:2019-10-14 19:57:52
【问题描述】:

我有一些在桌面上隐藏并在移动设备上显示的部分(div),但由于它们都有触发 wowjs 的类,因此它会在您到达该部分时提供可见性:可见性,因此使隐藏的 div 在桌面上可见以及。如果有什么办法解决这个问题?我希望所有 div 都设置动画,但如果您不在移动设备上,它们应该保持隐藏状态。

var wow = new WOW( {
    boxClass: 'animate'
} );

【问题讨论】:

  • 您能否添加工作代码或工作 sn-p,以便我查看您的问题?
  • 我没有任何自定义代码,就像示例中的一样。初始化 wowjs 并在 div 上放置一个类
  • 对于隐藏的 div,您使用的是哪个 CSS,可见性:隐藏或显示:无?显示:none 属性 div 不受 Wow JS 影响
  • 它的显示:无,但不知何故可见性:可见是压倒一切的。

标签: javascript wow.js


【解决方案1】:

它对我来说工作正常,请检查下面的工作 sn-p:

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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-08-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-05-10
    相关资源
    最近更新 更多