Question

我正在使用“滑动”滑块在首页上旋转图像。我在图像上添加了缩放效果和渐变效果。一切工作正常，但轮换期间遇到一个令人讨厌的问题。

旋转图像或手动切换图像时，缩放效果会暂时取消：将当前图像调整为默认大小。因此过渡并不是真的很顺利...我必须考虑缩放延迟和过渡延迟，以使其不那么明显。

感谢您的帮助。

$('.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>

切换图片时如何保持图片缩放

0 个答案: