Slick Slider最后一张幻灯片切换至首张时动画突兀问题求助

问题：使用Slick Slider时，从最后一张幻灯片切换到第一张的无限循环过程中，.inner-block元素从transform(0px 50px)变为transform(0px 0px)时没有过渡动画，效果突兀。尝试用CSS transition实现但不符合预期。

问题演示：

相关代码 #

JavaScript #

$('#slick-slider').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  swipe: true,
  arrows: true,
  // swipeToSlide: true,
  focusOnSelect: true,
  centerMode: false
});

CSS #

body {
  background-color: black;
}

#slick-slider {
  padding: 0 50px;
}

.slick-prev {
  left: 15px!important;
}

.slick-next {
  right: 15px!important;
}

.slide {
  padding: 0 10px;
}

.inner-block {
  height: 100px;
  background-color: red;
  transform: translate(0px, 50px);
  transition: all 500ms ease;
}

.slide:hover .inner-block,
.slide.slick-current .inner-block {
  transform: translate(0px, 0px);
}

HTML #

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

<div id="slick-slider">
  <div class="slide">
    <div class="inner-block"></div>
  </div>
  <div class="slide">
    <div class="inner-block"></div>
  </div>
  <div class="slide">
    <div class="inner-block"></div>
  </div>
  <div class="slide">
    <div class="inner-block"></div>
  </div>
  <div class="slide">
    <div class="inner-block"></div>
  </div>
</div>

解决方案 #

这个问题的根源是Slick Slider在无限循环切换时，会克隆首尾幻灯片实现无缝滚动，但克隆元素被添加到DOM时直接带上了slick-current类，没有从初始状态到激活状态的过程，导致过渡不生效。

修改步骤 #

1. 更新JavaScript逻辑，监听Slick的初始化和切换完成事件，手动触发克隆幻灯片的过渡：

$('#slick-slider').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  swipe: true,
  arrows: true,
  focusOnSelect: true,
  centerMode: false
})
.on('init afterChange', function(event, slick) {
  // 移除所有幻灯片的过渡锁定类
  $('.slide').removeClass('no-transition');
  // 临时锁定当前激活幻灯片的过渡，再延迟解锁触发动画
  $('.slide.slick-current').addClass('no-transition');
  setTimeout(() => {
    $('.slide.slick-current').removeClass('no-transition');
  }, 10);
});

2. 调整CSS样式，添加过渡锁定类，并优化过渡属性：

/* 新增：临时禁用过渡的类 */
.slide.no-transition .inner-block {
  transition: none !important;
}

body {
  background-color: black;
}

#slick-slider {
  padding: 0 50px;
}

.slick-prev {
  left: 15px!important;
}

.slick-next {
  right: 15px!important;
}

.slide {
  padding: 0 10px;
}

.inner-block {
  height: 100px;
  background-color: red;
  transform: translate(0px, 50px);
  transition: transform 500ms ease; /* 明确指定过渡属性，避免不必要的性能消耗 */
}

.slide:hover .inner-block,
.slide.slick-current .inner-block {
  transform: translate(0px, 0px);
}

原理说明 #

• 通过no-transition类临时禁用克隆元素的过渡，让它先跳转到激活状态，再移除类触发过渡动画，模拟正常幻灯片的状态变化过程。
• 将transition: all改为transition: transform，减少不必要的属性过渡，提升动画稳定性和页面性能。

内容的提问来源于stack exchange，提问作者Viacheslav Varov