z-index 无法直接做动画，因其为离散整数、不可插值；需配合 opacity 显隐与 z-index 阶跃切换实现层叠动画效果，同时注意预加载、容器定位及图片尺寸适配等关键细节。
直接用 z-index 做动画没效果，浏览器不支持插值；真正能“看起来像层叠动画”的方案，是靠 opacity 控制显隐 + z-index 阶跃式切换顺序，二者配合使用。
为什么给 z-index 加 transition 完全无效
z-index 是离散整数，不是连续可插值的属性（不像 opacity 或 transform）。写 transition: z-index 0.3s 后，你只会看到层级瞬间跳变，没有任何中间帧。
- 浏览器渲染层叠顺序时只看最终
z-index值，不计算“0.5”这种中间态 - 即使你同时写了
transition: opacity 0.3s, z-index 0.3s，z-index部分仍被忽略 - 真正需要动画感的地方，得交给
opacity、transform或filter等可过渡属性
用 opacity + z-index 实现淡入淡出切换的关键写法
必须让当前项“高 z-index + opacity: 1”，其余项“低 z-index + opacity: 0”，且所有切换都走内联样式控制，避免 CSS 类延迟。
- 父容器必须设
position: relative，否则absolute子元素会相对 body 定位，图片飞到页面左上角 - 每张图统一设
position: absolute; top: 0; left: 0; width: 100%; height: 100% - 切换逻辑只改两件事：
style.opacity和style.zIndex，别碰display或visibility - 示例 JS：
img.style.opacity = i === index ? '1' : '0'; img.style.zIndex = i === index ? '2' : '1';
容易被忽略的三个坑
多数人卡在细节上，不是逻辑错，而是漏了这些硬性前提。
- 忘了预加载下一张图：
opacity切到 1 的瞬间若图片还没加载完，会闪白或留空——用const nextImg = new Image(); nextImg.src = src;提前触发 - 父容器高度没设明确值（如
height: 100vh），导致height: 100%失效，图片只显示原尺寸 - 没加
object-fit: cover，图片比例和容器不一致时，边缘留白或拉伸变形，看着像“没叠严实”
最麻烦的从来不是怎么写动画，而是确保所有图片在切换前已就位、尺寸对齐、定位基准正确——这些不搞定，opacity 再顺滑也盖不住白边和错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
