使用 Owl Carousel 和 Wow.js答案

【问题标题】：Using Owl Carousel and Wow.js使用 Owl Carousel 和 Wow.js
【发布时间】：2018-08-06 16:25:08
【问题描述】：

猫头鹰旋转木马：http://www.owlcarousel.owlgraphic.com/ Wow.js：http://mynameismatthieu.com/WOW/

我正在使用 Owl Carousel 和 Wow.js

我正在尝试创建一个幻灯片，其中每张幻灯片的内容在幻灯片处于活动状态时都会进行动画处理。目前，所有内容的动画都会出现，即使它包含在其中的幻灯片不在屏幕上。 Wow.js 似乎只能识别幻灯片本身是可见的并激活所有动画

有没有办法可以更改它，以便动画仅在其包含的幻灯片在屏幕上可见时才会出现在内容上？

【问题讨论】：

我可以通过使内容可见并添加一个类来非常接近我想要的，但我不确定这是否是正确的方法。此外，这意味着初始幻灯片不会显示内容（在 CSS 中它是隐藏的）<script> var $owl = $('.test-carousel'); $owl.owlCarousel(); $owl.on('translated.owl.carousel', function( event ) { // trigger your animation function $( ".active .item h2" ).addClass( "animated bounceInDown" ); $(".active .item h2").show(); }); </script>

标签： javascript jquery css-animations owl-carousel wow.js

【解决方案1】：

mwdigian 是对的我有同样的问题接下来我做了：

<script> 
   var $owl = $('.test-carousel'); 
   $owl.owlCarousel(); 

   //here we need hide because method show() doesn't work with css visible
   $( ".active .item h2" ).hide();

   //all other is the same
   $owl.on('translated.owl.carousel',
      function( event ) { 
      $( ".active .item h2" ).addClass( "animated bounceInDown" ); 
      $(".active .item h2").show(); });
   </script>

【讨论】：