CSS定位实现幻灯片层叠切换技巧

为什么给z-index添加transition动画会失效

直接对z-index属性应用过渡动画是无效的，因为浏览器不支持对该属性进行插值计算。真正能实现“层叠顺序切换动画”效果的方案，是结合opacity控制透明度渐变与z-index的阶跃式切换，两者协同工作。

核心原理：离散属性与连续动画

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属性。
• 示例JavaScript代码：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过渡再平滑，也无法掩盖白边和错位带来的不良体验。