如何在JavaScript修改img标签SRC时添加过渡效果（无需div容器）

问题描述 #

我希望修改<img>标签的src属性时为其添加过渡效果，当前代码如下：

let bverse = document.getElementById('bible-verse'); 
setTimeout(function(){ 
  bverse.src="../images/bverses/verse2.jpg"; 
}, 5000);

此前我已经成功为背景图实现了过渡效果，代码如下：
JavaScript：

let slider = document.getElementById('hero-slider'); 
setTimeout(function(){ 
  slider.style.backgroundImage="url(../images/hero/slider-2.jpg)"; 
}, 5000);

CSS：

.hero-bg { 
  background-image: url(../images/hero/slider-0.jpg); 
  transition: background-image 2s; 
}

但我给bible-verse对应的<img>标签添加相同的CSS样式后，却无法实现过渡效果。请问如何在不使用div容器的前提下，为这个<img>标签添加过渡效果？

解决方案 #

首先要明确：CSS的transition只支持动画化CSS属性，而<img>的src是HTML属性，不属于可动画的CSS属性范畴，这就是直接给img加transition: src 2s无效的原因。而背景图的background-image是CSS属性，所以能正常触发过渡。

下面提供两种无需额外div容器的实现方法：

方法1：用opacity过渡叠加的两张img元素

这种方法通过绝对定位将两张img放在同一位置，通过过渡opacity属性实现切换效果：

1. HTML结构（无需div包裹，直接放两个img）：

<img id="bible-verse" src="../images/bverses/verse1.jpg" class="verse-img" />
<img id="bible-verse-next" src="../images/bverses/verse2.jpg" class="verse-img verse-next" />

2. CSS样式：

.verse-img {
  position: absolute;
  top: 0;
  left: 0;
  /* 确保两张图尺寸一致 */
  width: 300px;
  height: 200px;
  transition: opacity 2s ease-in-out;
}
.verse-next {
  /* 默认隐藏第二张图 */
  opacity: 0;
}

3. JavaScript代码：

let verseNext = document.getElementById('bible-verse-next');
setTimeout(function(){ 
  verseNext.style.opacity = 1;
}, 5000);

注意：这种方法会提前加载第二张图片，适合图片尺寸不大的场景。

方法2：将img当作容器，用background-image替代src

直接复用你之前背景图的过渡逻辑，把img元素的显示方式改为用background-image，这样就能利用CSS过渡：

1. HTML结构：

<img id="bible-verse" class="verse-bg" />

2. CSS样式：

.verse-bg {
  /* 必须设置固定宽高，因为没有src的img默认无尺寸 */
  width: 300px;
  height: 200px;
  background-image: url(../images/bverses/verse1.jpg);
  background-size: cover; /* 根据需求选择cover或contain */
  background-position: center;
  transition: background-image 2s ease-in-out;
}

3. JavaScript代码：

let bverse = document.getElementById('bible-verse'); 
setTimeout(function(){ 
  bverse.style.backgroundImage = "url(../images/bverses/verse2.jpg)"; 
}, 5000);

这种方法无需额外元素，完全复用你熟悉的背景图过渡逻辑，是最接近你原有实现的方案。

内容的提问来源于stack exchange，提问作者Carlos Daniel