在光滑的轮播幻灯片更改上切换动画 css 类

Question

我正在使用 slick carousel 制作滑块，我想要 caption 使用 animate css 的动画，而幻灯片是 active。

动画在加载时在第一张幻灯片上运行良好，但之后，动画在其他幻灯片上不起作用。

这是我的HTML

<div id="hero-slider">
  <div>
    <img src="http://lorempixel.com/1920/500/abstract/1" alt="">
    <div class="caption">
      <h3>We push the edge of</h3>
      <h2>what’s<br/>possible.123</h2>
    </div>
  </div>
  <div>
    <img src="http://lorempixel.com/1920/500/abstract/2" alt="">
    <div class="caption">
      <h3>We push the edge of</h3>
      <h2>what’s<br/>possible.456</h2>
    </div>
  </div>
</div>

这是SCSS

body {
  padding: 0;
  margin: 0;
}
#hero-slider {
    .caption {
        position: absolute;
        left: 10%;
        top: 10%;

        h2,h3 {
            color: white;
        }
    }
}

和我正在使用的jQuery

$(document).ready(function(){
$('#hero-slider').slick({
  autoplay: true,
  autoplaySpeed: 4000,
  dots: true,
  fade: true
});

if ($('.slick-slide').hasClass('slick-active')) {
    $('.caption').addClass('animated fadeInLeft');
  } else {
    $('.caption').removeClass('animated fadeInLeft');
  }
});

这里是Fiddle

Answer 1

您需要将动画重新应用到每张幻灯片，您可以这样做， beforeChange 将在每张幻灯片之前触发，您首先删除 classes 然后慢慢应用，这样您就可以轻松地再次添加 class 并显示效果。

 $("#hero-slider").on("beforeChange", function() {

    $('.caption').removeClass('animated fadeInLeft').hide();
    setTimeout(() => {    
      $('.caption').addClass('animated fadeInLeft').show();

    }, 1000);

  })

Demo

或者，您也可以使用延迟

  $('.caption').removeClass('animated fadeInLeft')
  .hide().delay(1000).addClass('animated fadeInLeft').show();

Answer 2

这是我没有 setTimeout 的解决方案：http://jsfiddle.net/tshmycL5/5/

在光滑的轮播幻灯片更改上切换动画 css 类

Toggle Animate css classes on slick carousel slide change

javascript

jquery

animate.css

slick.js