本文详解为何纯靠 z-index 切换会导致背景图过渡生硬，并提供基于 CSS opacity 过渡 + transitionend 事件监听的可靠解决方案，确保背景图真正实现无缝、渐进式淡入淡出。
本文详解为何纯靠 `z-index` 切换会导致背景图过渡生硬，并提供基于 css `opacity` 过渡 + `transitionend` 事件监听的可靠解决方案，确保背景图真正实现无缝、渐进式淡入淡出。
在您提供的代码中，背景图切换看似逻辑完整——预加载新图、设置 opacity 动画、交换 DOM 元素层级（z-index）——但实际效果却是“突变”而非“淡入淡出”，根本原因在于：z-index 的变更不触发 CSS 过渡，它立即生效，直接覆盖了正在执行的 opacity 动画过程。
当您在 setTimeout 中同时修改 currentBg.style.opacity = '0' 和后续的 z-index 交换时，浏览器会在 opacity 动画尚未完成（例如刚降到 0.3）时，就立刻将 bg1 移至底层、bg2 提至顶层。结果是：用户看到的是 bg1 突然消失 + bg2 瞬间显现，完全破坏了过渡连贯性。
✅ 正确做法是：让 opacity 的变化独立完成，仅在其动画彻底结束（即 transitionend 事件触发）后，再安全地交换元素角色和重置状态。这避免了任何竞态或中断，保证视觉流程纯净。
以下是重构后的核心逻辑（兼容现代浏览器，已去除冗余 timeout 嵌套）：
function changeBackgroundImage() {
const currentBg = document.getElementById('bg1');
const nextBg = document.getElementById('bg2');
const img = new Image();
img.src = `${imagePath}${imageIndex}${imageExtension}`;
console.log('Loading image:', img.src);
img.onload = () => {
// 1. 设置新图背景，初始 opacity=0（隐藏）
nextBg.style.backgroundImage = `url(${img.src})`;
nextBg.style.opacity = '0';
nextBg.style.zIndex = '2'; // 新图默认置于顶层（但不可见）
// 2. 立即触发动画：当前图淡出，新图淡入
currentBg.style.transition = 'opacity 3s ease-in-out';
nextBg.style.transition = 'opacity 3s ease-in-out';
// 强制重排，确保 transition 生效（关键！）
void currentBg.offsetWidth;
currentBg.style.opacity = '0';
nextBg.style.opacity = '1';
// 3. 监听新图的 transitionend —— 动画完成才交换引用 & 重置
const handleTransitionEnd = () => {
nextBg.removeEventListener('transitionend', handleTransitionEnd);
// 交换引用：让 nextBg 成为下一轮的 currentBg
[currentBg, nextBg] = [nextBg, currentBg];
// 重置原 currentBg（现为 nextBg）为透明、底层，准备下一轮
nextBg.style.opacity = '0';
nextBg.style.zIndex = '1';
// 更新索引并递归调度
imageIndex = (imageIndex % 3) + 1; // 示例：循环 1→2→3→1
setTimeout(changeBackgroundImage, 7000); // 下一张图延迟 7s 后开始
};
nextBg.addEventListener('transitionend', handleTransitionEnd);
};
img.onerror = () => {
console.warn('Image load failed:', img.src);
errorCount++;
if (errorCount < 10) {
imageIndex++;
changeBackgroundImage();
} else {
errorCount = 0;
imageIndex = 1;
changeBackgroundImage();
}
};
}对应 CSS 需精简并确保基础样式稳定：
.bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 1;
transition: opacity 3s ease-in-out; /* 统一声明，避免重复设置 */
z-index: 1;
}
#bg1 { z-index: 2; } /* 初始顶层 */
#bg2 { z-index: 1; } /* 初始底层 */? 关键注意事项：
- 必须调用 void element.offsetWidth：这是强制浏览器同步计算样式（reflow），确保 transition 属性在下一帧生效，否则动画可能被跳过；
- 不要手动管理 z-index 切换时机：由 CSS 层级 + opacity 控制可见性即可，z-index 仅用于初始布局，运行时无需动态修改；
- transitionend 事件需移除监听器：避免内存泄漏及多次触发导致逻辑错乱；
- 移动端适配已保留：isMobile 判断逻辑可继续使用，确保路径正确；
- 错误处理更健壮：递归调用前重置 errorCount，并加入图像序号回绕（如 % 3），防止越界。
最终效果：两张背景图始终共存于视口，仅通过 opacity 控制显隐，过渡自然流畅，无闪烁、无跳跃——这才是真正符合用户预期的“淡入淡出”。
