在 slick.js 滑块上为文本添加动画答案

【问题标题】：Adding animations to text on slick.js slider在 slick.js 滑块上为文本添加动画
【发布时间】：2015-07-28 00:09:02
【问题描述】：

我正在尝试将动画（利用 animate.css）添加到 slick.js 滑块上的某些文本中。动画工作，但并非没有首先出现然后执行动画。这是我正在开发的网站：http://dentiq.godigitaldev.com/

这是我的 slick.js 代码：

$(document).ready(function(){
        $('.featured-wrap').slick({
            infinite: true,
            speed: 400,
            autoplaySpeed: 6000,
            autoplay: true,
            fade: true,
            slide: 'div',
            cssEase: 'linear',
            dots: true,
            arrows: true,
            pauseOnHover: false,
            adaptiveHeight: true,
            onBeforeChange: function() {
                $('.slick-active > .display').addClass('animated fadeInDown');
                $('.slick-active > .display').addClass('hidden');
            },
            onAfterChange: function() {
                $('.slick-active > .display').removeClass('hidden');
                $('.slick-active > .display').addClass('animated fadeInDown');
            }
        });

.hidden 类很简单：.hidden {display:none;}

【问题讨论】：

标签： jquery animation slideshow slick.js

【解决方案1】：

内部使用 sass 的文本 ```

.header-slider-item-content {
    opacity: 0;
    transition: all 3s;
  }
.slick-active {
  .header-slider-item-content {
    opacity: 1;
    transition: all 3s;
  }
}
```

【讨论】：

【解决方案2】：

您的文本块位于移动的动画滑块块内。尝试将它们移动到外部容器中。在这种情况下，您可以按类或按索引访问它们。

例如：

$('.all-displays > .display').eq($('.slick-active').index()).addClass('animated fadeInDown');

【讨论】：