延遲點擊幻燈片動畫

Question

我有一個使用淡入淡出過渡的光滑滑塊。每個活動幻燈片都有一個縮放幻燈片背景圖像的動畫。幻燈片更改時，幻燈片中的動畫將被刪除。

手動點擊新滑塊時，縮放比例會跳轉回默認大小，然後轉換完成，在圖像上創建跳轉。我的問題是我如何延遲刪除動畫，所以我不會跳回到默認的比例？

代碼如下，你可以在這裏看到一個例子：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毫秒