Verzögerung der Animation beim Klicken auf die Folie Ändern

Question

Ich habe einen glatten Schieberegler, der einen Übergangsübergang verwendet. Jede aktive Folie verfügt über eine Animation, die das Hintergrundbild der Folie skaliert. Wenn sich die Folie ändert, wird die Animation von der Folie entfernt.

Wenn Sie manuell auf eine neue Folie klicken, springt die Skala auf die Standardgröße zurück, bevor die Überblendung einen Sprung auf dem Bild erstellt hat. Meine Frage ist, wie kann ich die Entfernung der Animation verzögern, damit ich nicht auf die Standardskala zurückspringe?

-Code ist unten, und Sie können sehen, ein Beispiel hier: 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

Verwenden SetTimeout,

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

Hier ist die Zeitverzögerung angegeben 1000 Millisekunden