Скрытые div видны с помощью WOW.js - PullRequest
Новая
       26

Скрытые div видны с помощью WOW.js

0 голосов
/ 14 октября 2019

У меня есть некоторые разделы (div), которые скрыты на рабочем столе и показаны на мобильном телефоне, но, поскольку у них всех есть класс, который вызывает wowjs, он обеспечивает видимость: видимый, когда вы достигаете раздела, поэтому скрытые div-элементы видны на рабочем столе. также. Есть ли способ обойти это? Я хочу, чтобы все div оживляли, но они должны оставаться скрытыми, если вы не на мобильном телефоне. 

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

1 Ответ

3 голосов
/ 14 октября 2019

Это нормально работает для меня, пожалуйста, проверьте ниже рабочий фрагмент: 

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>
...