将动画应用于光滑幻灯片

编程问答 2022-08-16

问题描述

我想将这些图像之间的过渡效果应用到我的Slick幻灯片上，以便我可以控制。

动画样本（基本上是淡入淡出并同时移动）：https://jsfiddle.net/bg90fayo/

我的幻灯片：https://jsfiddle.net/L6qjpky4/3/ 

<body>
    
    <div class="my-slide-container">
        
        <div id="top-slider" class="my-slide-wrapper">
            <img class="slide slide00" src="https://dummyimage.com/300x180/ff0000/ffffff.jpg&text=Slide+1">
            <img class="slide slide01" src="https://dummyimage.com/300x180/00ff00/000000.jpg&text=Slide+2">
            <img class="slide slide02" src="https://dummyimage.com/300x180/0000ff/ffffff.jpg&text=Slide+3">
        </div>
        
        <div id="bottom-slider" class="my-slide-wrapper">
            <img class="slide slide00 main"  style="animation-delay: 0s;  animation-fill-mode: forwards; opacity:0;" src="https://i.imgur.com/x3dgNKQ.jpg">
            <img class="slide slide01 main"  style="animation-delay: 4s;  animation-fill-mode: forwards; opacity:0; display: block; visibility: visible;" src="https://i.imgur.com/RCOaeIE.jpg">
            <img class="slide slide02" src="https://dummyimage.com/300x180/0000ff/ffffff.jpg&text=Image+3">
        </div>
        
    </div>
    
</body>

CSS 

.my-slide-container {
    margin: 30px;
}

.my-slide-wrapper,.my-image-wrapper {
    margin: 0 auto;
    max-width: 300px;
}

img {
    max-width: 300px;
    width: 100%;
}

.slick-dots li {
    margin: 0;
}

.slick-next::before,.slick-prev::before {
    color: #000;
    opacity: 1;
}

.my-image {
    visibility: hidden;
    position: absolute;
}

#myImage00 {
    visibility: visible;
}

.im-hiding {
    visibility: hidden;
}

.im-showing {
    visibility: visible;
}

  @keyframes fade-in-move-down {
    0% {
      opacity: 0;
      transform: translateX(2rem);
    } 
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
    .main{
    animation: fade-in-move-down 1.2s;
    top: 0;
    left: 0;
    display: block;
    visibility: visible;
  }
  
    .slide .slick-active img{
        visibility: visible;
    }

JS 

$(document).ready(function () {
    $('#top-slider').slick({
        asNavFor: '#bottom-slider',dots: true,infinite: false,speed: 1,slidesToShow: 1,slidesToScroll: 1
    });
    
    $('#bottom-slider').slick({
        arrows: false,dots: false,fade:true,draggable: false,slidesToScroll: 1,waitForAnimate: false,});
    
});

幻灯片之间的所需过渡：

body{
  background-color:black;
}
  
  
  @keyframes fade-in-move-down {
    0% {
      opacity: 0;
      transform: translateX(2rem);
    } 
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
    .main{
    animation: fade-in-move-down 1.2s;
    top: 0;
    left: 0;
    display: block;
    visibility: visible;
  }

谢谢。

解决方法

您可以使用漂亮的参数来做到这一点：

$('#top-slider').slick({
  asNavFor: '#bottom-slider',dots: true,infinite: false,speed: 1,autoplay: true,autoplaySpeed: 2000,slidesToShow: 1,slidesToScroll: 1
});

您可以根据需要进行调整-了解更多here。

根据评论进行编辑：

您需要将动画设置为活动的幻灯片选择器：

.slick-active { animation: fade-in-move-down 1.2s; }

要将动画仅设置到第二个滑块，您可以：

#bottom-slider .slick-active { animation: fade-in-move-down 1.2s; }
css-animationsfrontendhtmljavascript