如何为动态切换的图片添加淡入淡出过渡效果_技术教程

本文介绍如何通过 css 过渡（transition）与 javascript 配合，为图片 src 动态更换实现平滑的淡入淡出（fade）效果，避免生硬跳变，提升用户视觉体验。

要为图片切换添加淡入淡出过渡效果，核心思路是：不直接替换 src，而是先降低当前图片透明度 → 替换图片 → 再恢复透明度。由于元素在 src 切换瞬间会短暂空白或闪烁，单纯靠 opacity 过渡无法覆盖这一间隙，因此需配合 JavaScript 控制类名切换与定时逻辑，确保视觉连贯。

✅ 实现步骤详解

CSS 层：定义过渡与状态类
在原有 .features-image 基础上添加 transition，并新增两个辅助类：

.features-image {
  width: 100%;
  height: 600px;
  object-fit: cover;
  border-radius: 30px; /* 推荐移至 CSS，而非内联 style */
  transition: opacity 0.5s ease-in-out; /* 关键：对 opacity 做 500ms 缓动过渡 */
}

.features-image.fade {
  opacity: 0;
}

.features-image.show {
  opacity: 1;
}

⚠️ 注意：transition 必须作用于 opacity（而非 all），否则可能意外触发其他属性动画；ease-in-out 提供更自然的起止节奏。

JavaScript 层：精准控制切换时序
每次点击按钮时，执行三步操作：

移除 .show，添加 .fade → 图片渐隐（立即生效）
setTimeout 延迟 500ms（与 CSS 过渡时长一致）→ 等待淡出完成
更新 src，移除 .fade，添加 .show → 新图载入后渐显

优化

后的函数（已去重、可复用）：

function switchFeatureImage(newSrc) {
  const img = document.getElementById("theImage");
  img.classList.remove("show");
  img.classList.add("fade");

  setTimeout(() => {
    img.src = newSrc;
    // 可选：添加 load 监听确保图像加载完成后再显示（防白屏）
    img.onload = () => {
      img.classList.remove("fade");
      img.classList.add("show");
    };
    // 若加载失败，至少恢复显示并提示（增强健壮性）
    img.onerror = () => {
      console.warn("Image load failed:", newSrc);
      img.classList.remove("fade");
      img.classList.add("show");
    };
  }, 500);
}

// 绑定到按钮（推荐改用事件委托，避免内联 onclick）
document.getElementById("btn-home").onclick = () => 
  switchFeatureImage("https://media.designcafe.com/...1.jpg");
document.getElementById("btn-mezzanine").onclick = () => 
  switchFeatureImage("https://hommes.studio/...16.jpg");