javascript - 单击幻灯片更改时延迟动画

Question

我有一个使用淡入淡出过渡的光滑 slider 。每张事件幻灯片都有一个缩放幻灯片背景图像的动画。当幻灯片发生变化时，动画将从幻灯片中移除。

当手动点击新幻灯片时，在转换完成之前，比例会跳回默认大小，从而在图像上创建跳转。我的问题是如何延迟动画的移除，这样我就不会跳回默认比例？

代码如下，您可以在此处查看示例:http://tesla.uk-cpi.com/

JS

// Slider on Home Page
$('.homeSlider').slick({
     draggable: true,
     autoplay: true,
     autoplaySpeed: 7000,
     arrows: false,
     dots: true,
     fade: true,
     speed: 500,
     infinite: true,
     cssEase: 'linear',
     touchThreshold: 100,
     customPaging : function(homeSlider, i) {
        var title = $(homeSlider.$slides[i]).data('title');
        var number = $(homeSlider.$slides[i]).data('index-number');

        return '<a class="pager__item" onClick=reset()><div class="slide-number">'+number+'</div><div class="slide-title">'+title+'</div></a>';
    },
});

$('.slick-active .item').addClass('kenburnseffect');

$('.homeSlider').on('afterChange', function(event, slick, currentSlide){
    $('.item').removeClass('kenburnseffect');
    $('.slick-active .item').addClass('kenburnseffect');
});

CSS

  .item {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

@-webkit-keyframes kenburns {
  from {
    -webkit-transform: scale(1.1);
  }
  to {
    -webkit-transform: scale(1);
  }
}
@keyframes kenburns {
  from {
    transform: scale(1.1);
  }
  to {
    transform: scale(1);
  }
}

Answer 1

使用setTimeout，

$('.homeSlider').on('afterChange', function(event, slick, currentSlide){
    setTimeout(function(){
        $('.item').removeClass('kenburnseffect');
        $('.slick-active .item').addClass('kenburnseffect');
    },1000);
});

这里给定延时1000毫秒