使用原生JavaScript实现图片切换的淡入淡出过渡效果

已实现点击切换图片功能，但无法给“原图/后期图”模块添加淡入淡出过渡效果，项目使用Bootstrap框架。以下是修改后的完整解决方案：

核心思路 #

直接替换src属性无法触发CSS过渡动画，因此改用两张图片叠加的方式，通过控制opacity属性结合过渡效果实现淡入淡出。

修改后的HTML结构 #

将单个<img>改为两张叠加的图片，通过类名控制显示状态：

<div class="row">
  <div class="post-production-container">
    <div class="box">
      <div class="imgBx col">
        <!-- 原图 -->
        <img src="./assets/img/prima-dopo/ferrero-prima.jpg" class="swap-img active" alt="原图">
        <!-- 后期图 -->
        <img src="./assets/img/prima-dopo/ferrero-dopo.jpg" class="swap-img" alt="后期图" onClick="swap(this.parentElement)">
      </div>
      <div class="content">
        <div>
          <h2>Image Title</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi accusamus molestias quidem iusto.</p>
        </div>
      </div>
    </div>

    <div class="box">
      <div class="imgBx col">
        <img src="./assets/img/prima-dopo/coppette-prima.jpg" class="swap-img active" alt="原图">
        <img src="./assets/img/prima-dopo/coppette-dopo.jpg" class="swap-img" alt="后期图" onClick="swap(this.parentElement)" onMouseOver="swap(this.parentElement)">
      </div>
      <div class="content">
        <div>
          <h2>Image Title</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi accusamus molestias quidem iusto.</p>
        </div>
      </div>
    </div>
  </div>
</div>

更新CSS样式 #

给图片容器添加相对定位，给两张图片设置绝对定位和过渡属性，通过active类控制透明度：

.post-production-container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  transform-style: preserve-3d;
  perspective: 500px;
  margin: auto;
}

.post-production-container .box {
  position: relative;
  width: 250px;
  height: 250px;
  background: #000;
  transition: 0.5s;
  transform-style: preserve-3d;
  overflow: hidden;
  margin-right: 15px;
  margin-top: 45px;
  transition: 2s all;
}

.post-production-container .box .imgBx {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 新增：确保内部图片叠加 */
  position: relative;
}

/* 新增：图片通用样式 */
.post-production-container .box .imgBx .swap-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease-in-out; /* 淡入淡出过渡 */
}

/* 默认显示原图 */
.post-production-container .box .imgBx .swap-img.active {
  opacity: 1;
  pointer-events: all;
}

/* 默认隐藏后期图 */
.post-production-container .box .imgBx .swap-img:not(.active) {
  opacity: 0;
  pointer-events: none; /* 避免点击隐藏的图片 */
}

.post-production-container .box .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  padding: 20px;
  align-items: flex-end;
  box-sizing: border-box;
}

.post-production-container .box .content h2 {
  color: #fff;
  transition: 0.5s;
  text-transform: uppercase;
  margin-bottom: 5px;
  font-size: 20px;
  transform: translateY(200px);
  transition-delay: 0.3s;
}

.post-production-container .box:hover .content h2 {
  transform: translateY(0px);
}

.post-production-container .box .content p {
  color: #fff;
  transition: 0.5s;
  font-size: 14px;
  transform: translateY(200px);
  transition-delay: 0.4s;
}

.post-production-container .box:hover .content p {
  transform: translateY(0px);
}

@media (min-width: 500px) {
  .post-production-container:hover .box {
    transform: rotateY(25deg);
  }
  .post-production-container .box:hover~.box {
    transform: rotateY(-25deg);
  }
  .post-production-container .box:hover {
    transform: rotateY(0deg) scale(1.25);
    z-index: 1;
    box-shadow: 0 25px 40px rgba(0, 0, 0, 0.5);
  }
}

修改JavaScript逻辑 #

不再替换src，而是切换图片的active类来实现显示切换：

function swap(container) {
  const imgs = container.querySelectorAll('.swap-img');
  imgs.forEach(img => img.classList.toggle('active'));
}

说明 #

• 过渡时长可通过修改CSS中的transition: opacity 0.5s ease-in-out调整，0.5s为过渡时间，ease-in-out为过渡曲线
• 点击事件绑定在图片容器或任意一张图片上都可，确保触发时能找到两张图片切换类名
• 保留了原有的Bootstrap布局和3D hover效果，不影响原有功能

内容的提问来源于stack exchange，提问作者Dario Petralia