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

Question

我正在制作一个滑块slick carousel，我想在幻灯片是 .css 时caption使用animatecss动画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');
  }
});

这是小提琴

Answer 1

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

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

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

    }, 1000);

  })

演示

或者，您也可以使用延迟

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