Toggle Animate css classes on slick carousel 幻灯片更改答案

【问题标题】：Toggle Animate css classes on slick carousel slide changeToggle Animate css classes on slick carousel 幻灯片更改
【发布时间】：2019-01-04 05:49:58
【问题描述】：

我正在使用slick carousel 制作一个滑块，我想要使用animate css 的caption 动画，而幻灯片是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

【问题讨论】：

标签： javascript jquery slick.js animate.css

【解决方案1】：

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

 $("#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();

【讨论】：

它完全按照我的意愿工作，感谢...非常感谢...干杯

【解决方案2】：

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

【讨论】：