平滑的 CSS 背景图像过渡答案

【问题标题】：Smooth CSS background image transition平滑的 CSS 背景图像过渡
【发布时间】：2020-01-05 22:48:54
【问题描述】：

我有这个小 js 脚本：它可以工作，但问题是当我快速悬停按钮时，平滑过渡效果不起作用，并且当 img 突然变化时它会变得非常难看。

感谢您的帮助。

var buttons = document.querySelectorAll("#section2_list li");
  var div_img = document.getElementById('div_img');
    
  buttons[0].addEventListener("mouseover", function() {
    div_img.style.backgroundImage = "url(https://picsum.photos/id/237/200/100)";          
  });
    
  buttons[1].addEventListener("mouseover", function() {
    div_img.style.backgroundImage = "url(https://picsum.photos/id/238/200/100)";          
  });

#div_img {
  width:  200px;
  height: 100px;
  transition: all 0.9s ease ;
 }

<ul id="section2_list">
  <li>one</li>
  <li>two</li>
</ul>

<div id="div_img">
</div>

【问题讨论】：

如果可能，尝试贡献一个有效的 sn-p（stackoverflow 在文本编辑器工具栏中有这个工具），以便人们更容易帮助你。
您必须预先加载图像以使过渡平滑，或者使用图像精灵。

标签： javascript css css-animations css-transitions

【解决方案1】：

不能像background-image is not an animatable property 那样直接转换background-image 属性。

但是你可以将两张图片叠加，然后将最上面的图片的opacity进行过渡，达到想要的效果：

var buttons     = document.querySelectorAll("#section2_list li");
var img_default = document.getElementById('img_default');
    
buttons[0].addEventListener("mouseover", function() {
  img_default.style.opacity = 0;
});
    
buttons[1].addEventListener("mouseover", function() {
  img_default.style.opacity = 1;
});

#div_img {
  width:  200px;
  height: 100px;
}

#div_img img {
  position: absolute;
}

 #img_default {
   transition: all 0.9s ease ;
 }

<ul id="section2_list">
  <li>one</li>
  <li>two</li>
</ul>

<div id="div_img">
  <img src="https://picsum.photos/id/237/200/100" />
  <img id="img_default" src="https://picsum.photos/id/238/200/100" />
</div>

【讨论】：