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毫秒

在点击幻灯片更改时延迟动画

1 个答案: