时间戳

首页 > 解决方案 > 如何将 css 过渡应用于背景图像更改？

javascript - 如何将 css 过渡应用于背景图像更改？

问题描述

如果我使用下面的简单 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 只是覆盖了图像？

标签： javascriptcss

解决方案

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

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>

推荐阅读