向slick.js滑块上的文本添加动画

Question

我正在尝试添加动画(利用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 :none；}

Answer 1

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

例如：

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

Answer 2

文本内部使用sass‘

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