スライドのクリックによるアニメーションの遅延

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ミリ秒です