单容器 background-image 无法 transition 是因浏览器不支持 url() 插值，必须用双容器 opacity 交替切换；需预加载图片、严格同步 z-index 与 opacity、使用 100dvh 和硬件加速防闪白。
直接给单个容器的 background-image 加 transition: background-image 无效，浏览器无法插值两张图片，结果就是跳变或闪白。必须用两个独立容器分别承载图片，靠 opacity 交替变化模拟切换。
为什么不能只用一个 div + opacity 动画
单容器切换时，新图未加载完就触发 opacity 变化，会导致中间空白；即使加了 transition，background-image 属性本身不可过渡，CSS 引擎不会等待图片加载完成再开始动画。
- 常见错误现象：
opacity开始变但背景还是旧图，几毫秒后突然跳成新图，或直接闪一下白底 - 根本原因：浏览器对
url()值不做插值，transition对background-image完全无响应 - 即使把
opacity设为 0 再设回 1，也解决不了加载时机问题——得让两张图都提前就位
双容器结构怎么写才不错位
两个 div 必须尺寸、定位完全一致，否则淡入时会偏移或露边。父容器设 position: relative，子层用 position: absolute 覆盖全屏。
- 两层都要加
top: 0; left: 0; width: 100%; height: 100%，别用100vh（iOS 地址栏会截断），改用min-height: 100dvh - 必须同时设置
background-size: cover; background-position: center，否则缩放/居中不一致，切换时有“抖动”感 - 不要用
display: none或visibility: hidden控制显隐——它们会中断transition流程 - 两层都加
transition: opacity 0.6s ease-in-out，不能只加在其中一层
如何避免切换时闪白底
闪白本质是两层 opacity 交接不严：前层还没完全退到 0，后层还没升到 1，中间透出父容器背景色。关键在预加载和时序控制。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 必须预加载下一张图——用
new Image().src = 'next.jpg'或<link rel="preload">，等load事件后再触发切换 -
z-index不能动画，但可以在@keyframes里突变：前层从z-index: 2→1，后层从1→2，配合opacity同步变化 - 动画 duration 和 delay 要匹配：比如前层
opacity: 1 → 0用 0.6s，后层0 → 1就不能加delay，否则中间空档 - 加
transform: translateZ(0)强制硬件加速，尤其防 iOS Safari 的 opacity 闪帧
JS 切换时容易踩的 timing 坑
手动调 element.style.opacity 或切 class 看似简单，但轮播或快速点击时极易不同步——上一帧动画没结束，下一帧已启动。
- 别用
setInterval直接轮播：每次触发前先clearTimeout(this.timer)，避免定时器堆积 - 监听
transitionend事件比预估时间更可靠，但注意它在opacity: 0时可能被浏览器跳过，建议监听所有属性：el.addEventListener('transitionend', handler, { once: true }) - 切换前检查当前
getComputedStyle(el).opacity是否已归零，否则强行覆盖会导致动画中断或卡顿 - 移动端要禁用双击缩放，否则快速点击可能触发 zoom，干扰定位精度
最常被忽略的是图片加载时机和 dvh 单位兼容性——前者导致闪白，后者导致 iPhone 上背景被砍掉一截。这两点不处理，其他再精细也没用。
