Question

我试图在slick.js滑块上为某些文本添加动画（利用animate.css）。动画可以工作，但不是先显示然后执行动画。这是我正在处理的网站：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;}

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;
  }
}
```

在slick.js滑块上添加动画到文本

2 个答案: