如何将 css 过渡应用于背景图像更改?

Question

如果我使用以下简单的JS在计时器上更改背景图像，我可以应用CSS过渡来使它们淡入而不是立即交换吗？

var images = new Array(
'../images/pic1.jpg'
,'../images/pic2.jpg'
,'../images/pic3.jpg'
);
var i = 0;
function swap() {
var elm = document.querySelector('.myCSSClass');
if (i >= images.length) { i = 0 };
elm.style.backgroundImage = 'url(' + images[i] + ')';
i += 1;
}
window.onload = setInterval(swap, 2000);

例如，我正在尝试使用 CSS：

.myCSSClass{
transition: background-image linear 0.3s;
}

但没有得到任何结果。我觉得这是不可能的，因为javascript只是覆盖了图像？

Answer 1

您只需要确保最初加载所有图像以进行过渡，否则每次调用新图像时，您都会突然更改，因为它将加载 或者您必须等待一个周期，因为您的脚本将在该周期内加载图像。

var images = new Array(
'https://picsum.photos/id/0/300/300', 
'https://picsum.photos/id/10/300/300', 
'https://picsum.photos/id/15/300/300'
);
var i = 0;
function swap() {
var elm = document.querySelector('.box');
if (i >= images.length) {
i = 0
};
elm.style.backgroundImage = 'url(' + images[i] + ')';
i += 1;
}
window.onload = setInterval(swap, 2000);

.box {
transition: background-image linear 0.5s;
width: 200px;
height: 200px;
background-size: cover;

/* This will force the initial load of all the images*/
background-image:
url(https://picsum.photos/id/0/300/300),
url(https://picsum.photos/id/10/300/300),
url(https://picsum.photos/id/15/300/300);
}

<div class="box"></div>

在上面，您只会在某些浏览器(如 chrome(上褪色。这是另一个想法，我将考虑另一层并依赖于不透明度更改：

var images = new Array(
'https://picsum.photos/id/0/300/300', 
'https://picsum.photos/id/10/300/300', 
'https://picsum.photos/id/15/300/300'
);
var i = 0;
function swap() {
var elm = document.querySelector('.box');
if (i >= images.length) {
i = 0
};
elm.style.backgroundImage = 'url(' + images[i] + ')';
i += 1;
}
window.onload = setInterval(swap, 2000);

.box {
width: 200px;
height: 200px;
background-size: 0 0;

/* This will force the initial load of all the images*/
background-image:
url(https://picsum.photos/id/0/300/300),
url(https://picsum.photos/id/10/300/300),
url(https://picsum.photos/id/15/300/300);
position:relative;
z-index:0;
}
.box:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background-image:inherit;
background-size:cover;
animation:op 1s alternate linear infinite 1s;
}
@keyframes op {
to {
opacity:0;
}
}

<div class="box"></div>