如何解决使用CSS Webkit和Slick的背景JavaScript动画
我有一个滑块,可根据当前图像更改背景。问题是背景之间的过渡不存在。我不想使用“过渡”适当性,因为它没有提供我想要的确切动画。
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 举报,一经查实,本站将立刻删除。