使用CSS Webkit和Slick的背景JavaScript动画

编程问答 2022-10-31

问题描述

我有一个滑块，可根据当前图像更改背景。问题是背景之间的过渡不存在。我不想使用“过渡”适当性，因为它没有提供我想要的确切动画。

Codepen：https://codepen.io/jinzagon/pen/LYNGNEZ

用于更改背景的脚本： 

$(function(){


var imgurl = {
    "image1" : "https://wallpaperaccess.com/full/184795.jpg","image2" : "https://images2.alphacoders.com/774/774269.jpg","image3" : "https://wallpapercave.com/wp/wp2020010.jpg",};


 
$('.slider').slick({
    dots: true,infinite: true,speed: 800,slidesToShow: 1,adaptiveHeight: true,autoplay: true,autoplaySpeed: 8000,slidesToScroll: 1,arrows: false,});
  
changeBg(imgurl)
$('#slider').on('afterChange',".slider",function(event,slick,currentSlide,nextSlide){
    changeBg(imgurl)
});  

function changeBg(imgurl) {
    $("body").css("background-image","url(" + imgurl[$(".slick-track div.slick-slide.slick-active").attr("class").split(" ")[0]] + ")");

}
});

所需动画的脚本： 

.fade-in-right {
            -webkit-animation: fade-in-right 0.6s cubic-bezier(0.390,0.575,0.565,1.000) both;
                    animation: fade-in-right 0.6s cubic-bezier(0.390,1.000) both;
        }
    * Generated by Animista on 2020-8-12 15:20:11
    * Licensed under FreeBSD License.
    * See http://animista.net/license for more info. 
    * w: http://animista.net,t: @cssanimista
    * ---------------------------------------------- */

    /**
    * ----------------------------------------
    * animation fade-in-right
    * ----------------------------------------
    */
    @-webkit-keyframes fade-in-right {
    0% {
        -webkit-transform: translateX(50px);
                transform: translateX(50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
        opacity: 1;
    }
    }
    @keyframes fade-in-right {
    0% {
        -webkit-transform: translateX(50px);
                transform: translateX(50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
        opacity: 1;
    }
    }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

animationanimationjavascriptslick.jswebkit