0

我正在使用 Slick 滑块在我的主页上旋转我的图像。我在图像上添加了缩放效果和渐变过渡。一切正常，但我在轮换期间遇到了一个烦人的问题。

当图像旋转或我们手动切换它们时，缩放效果会被短暂取消：当前图像被调整为默认大小。所以过渡不是很平滑......我必须使用缩放延迟和过渡延迟以使其不那么明显。

https://vincentbaguet.be/em6/index.html

感谢您的帮助。

$('.slider').slick({
		autoplay: true,
		autoplaySpeed: 4500,
		speed: 2000,
		lazyLoad: 'progressive',
		pauseOnHover: false,
		infinite: true,
		fade: true,
		arrows: false,
		dots: true,
		cssEase: 'ease-in-out',
		loop: true
});
.slider .slide.slick-active img {
    transform: scale(1);
    animation: animate 5.5s 1 ease-in-out;
}

@keyframes animate {
  from {
    -webkit-transform: scale(1.1) translate(0px);
            transform: scale(1.1) translate(0px);
  }
  to {
    -webkit-transform: scale(1) translate(0px);
            transform: scale(1) translate(0px);
  }
}
<div class="slider">
   <div class="slide">
      <div class="slide-img">
          <img src="" alt="" data-lazy="img/slides/slide-corporate-1.jpg" class="full-image animated" />
      </div>
      <div class="slide-content">
          <div class="slide-content-headings">
              <h2 class="animated" data-animation-in="fadeInUp">The smart way to manage your freight bills</h2>
              <p class="animated" data-animation-in="fadeInUp" data-delay-in="0.2">With awesome animations</p>
          </div>
      </div>
  </div>
  <div class="slide">
      <div class="slide-img">
          <img src="" alt="" data-lazy="img/slides/slide-corporate-2.jpg" class="full-image animated" />
      </div>
      <div class="slide-content">
          <div class="slide-content-headings">
              <h2 class="animated" data-animation-in="fadeInUp">Your essential link between supply chain</h2>
              <p class="animated" data-animation-in="fadeInUp" data-delay-in="0.2">Full control of transport expenses</p>
          </div>
      </div>
  </div>
</div>

4

0 回答 0