本文介绍如何通过 css 过渡与 javascript 协同控制，为动态更换的 `` 元素实现平滑的淡入淡出（fade）效果，避免生硬跳变，提升用户体验。
要为图片切换添加自然的淡入淡出过渡效果，核心思路是：不直接替换 src 并依赖视觉瞬时更新，而是通过控制 opacity 的渐变变化，在新旧图像之间建立视觉缓冲。由于 <img> 标签本身不支持 transition 直接作用于 src 属性（该属性不可动画），我们必须借助 CSS 类切换 + opacity 动画 + JavaScript 时序控制来实现。
✅ 实现步骤详解
-
增强 CSS 样式：为 .features-image 添加 transition: opacity 0.5s ease-in-out，并定义两个辅助类：
- .fade：设置 opacity: 0，用于触发隐藏动画；
- .show：确保最终显示状态为 opacity: 1（也可省略，因默认即为 1，但显式声明更健壮）。
优化 JavaScript 逻辑：每次切换前，先移除 .show、添加 .fade 使当前图淡出；等待过渡时长（如 500ms）后，再更新 src 并移除 .fade、添加 .show，让新图淡入。
以下是整合后的完整代码：
.features-image {
width: 100%;
height: 600px;
object-fit: cover;
border-radius: 30px; /* 建议移入 CSS，避免内联样式 */
transition: opacity 0.5s ease-in-out;
}
.features-image.fade {
opacity: 0;
}
.features-image.show {
opacity: 1;
}
.features-button {
width: 200px;
padding: 10px 30px;
font-family: 'Jost';
font-size: 20px;
border: 0;
border-radius: 10px;
cursor: pointer;
background: #fff;
color: #453011;
margin: 5px 25%;
}<div id="features-buttons">
<button class="features-button" onclick="featureImage1()" type="button">
<i class="fa fa-briefcase"></i> Home Office
</button>
<button class="features-button" onclick="featureImage2()" type="button">
<i class="fa fa-plus-circle"></i> The Mezzanine (Add On)
</button>
</div>
<img class="features-image show" id="theImage"
src="/uploads/20260118/1768694173696c219d687a9.jpg" />function featureImage1() {
const img = document.getElementById("theImage");
img.classList.remove("show");
img.classList.add("fade");
setTimeout(() => {
img.src = "/uploads/20260118/1768694173696c219d687a9.jpg";
img.classList.remove("fade");
img.classList.add("show");
}, 500);
}
function featureImage2() {
const img = document.getElementById("theImage");
img.classList.remove("show");
img.classList.add("fade");
setTimeout(() => {
img.src = "https://hommes.studio/wp-content/uploads/Get-To-Know-Interior-Design-Trends-2022_16.jpg";
img.classList.remove("fade");
img.classList.add("show");
}, 500);
}⚠️ 注意事项与进阶建议
- 避免重复 ID：原 HTML 中两个 <button> 共享 id="theButton"，违反 HTML 规范（ID 应唯一），已移除冗余 id。
- 预加载优化（可选）：若图片较大，可提前用 new Image().src = url 预加载，防止切换时出现空白或延迟。
- 防抖与节流：用户快速连点按钮时，可能触发多次 setTimeout，建议引入简单节流逻辑（如禁用按钮期间加 disabled 或使用 clearTimeout）。
- 现代替代方案：如项目支持较新浏览器，可考虑使用 CSS @keyframes + animation 或 IntersectionObserver 配合 loading="lazy" 做更精细的交互动画。
通过以上方法，你就能在不依赖第三方库的前提下，为图片切换赋予专业级的视觉过渡体验。
