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

t0ybt7op 于 2022-11-03 发布在 jQuery

关注(0)|答案(2)|浏览(134)

我有一个使用淡入淡出过渡的光滑滑块。每个活动幻灯片都有一个缩放幻灯片背景图像的动画。当幻灯片更改时，动画将从幻灯片中删除。
当手动单击新幻灯片时，在过渡完成在图像上创建跳转之前，比例会跳回到默认大小。我的问题是如何延迟动画的删除，以便不跳回到默认比例？
代码如下所示，您可以在此处看到一个示例：http://tesla.uk-cpi.com/

// 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);
  }
}

jquery

来源：https://stackoverflow.com/questions/42809070/delaying-animation-on-click-slide-change

2条答案

按热度按时间

db2dz4w81#

使用设置超时，

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

这里，时间延迟为1000毫秒

赞(0）回复(0）举报 2022-11-03

fjaof16o2#

我也遇到过同样的问题，但从来没有找到一个好的JS解决方案。我发现的一个CSS解决方案虽然不完美，但至少隐藏了当你跳过幻灯片动画时丑陋的“跳转”，添加了以下内容：

.slick-slide[aria-hidden="true"] img {
  visibility: hidden; 
}

它基本上隐藏了活动幻灯片在淡入淡出，所以你不会得到太多的混合之间的两个幻灯片的休闲观察者可能不会注意到或关心。

EDIT-找到了另一个更好的CSS解决方案。有一个CSS动画属性叫做“animation-play-state”。您可以暂停它，这样当当前类消失时，它就不会跳转，而不是在切换过程中隐藏图像。但是，您需要使动画无限，因为它会继续，而不是在每张幻灯片上重置。因此，如果用户返回到它们，它最终会停止。您还需要使动画以相同的状态开始和结束，以便无缝循环。代码示例如下：

img {
  transform-origin: bottom left;
  transform: scale(1.1);
  animation-name: bannerPan;
  animation-duration: 18s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  animation-play-state: paused;
}

.slick-current img {
  animation-play-state: running;
}

@keyframes bannerPan {
  0% {
    transform-origin: bottom left;
    transform: scale(1.0);
  }

  50% {
    transform-origin: bottom left;
    transform: scale(1.1);
  }

  100% {
    transform-origin: bottom left;
    transform: scale(1.0);
  }
}

赞(0）回复(0）举报 2022-11-03

我来回答

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

2条答案

相关问题

热门标签

最新问答