z-index 无法添加 transition 动画，因其为离散整数属性，浏览器不支持插值；需配合 opacity、transform 等可动画属性营造纵深感，并手动设置 z-index 阶跃值。
z-index 本身加 transition 完全无效——浏览器不支持对离散整数插值，你只会看到层级瞬间跳变，没有中间过程。
为什么给 z-index 加 transition 没反应
因为 z-index 是整数型属性，不是连续可计算的（不像 opacity 或 transform）。写 transition: z-index 0.3s 后，CSS 引擎直接忽略该部分；即使和 opacity 写在同一行，z-index 的过渡也从不执行。渲染层叠顺序只依赖最终值，不存在 “z-index: 2.5” 这种中间态。
真正能“看起来像层级动画”的组合方案
必须用可动画属性制造视觉纵深感，再靠 z-index 做阶跃式兜底控制。常见有效组合：
-
opacity控制显隐节奏，配合visibility避免点击穿透 -
transform: scale()或transform: translateZ()制造前后错觉（需父容器设perspective和transform-style: preserve-3d） -
z-index只在关键节点手动设值（如.active { z-index: 100; }），不参与过渡 - 所有元素必须是定位元素（
position: relative/absolute），否则z-index无效
容易踩的坑：层级错乱、闪动、首帧卡顿
这些不是 CSS 写错了，而是合成层管理没到位：
- 没提前触发硬件加速：元素首次动画前未设
transform: translateZ(0)或will-change: transform，导致首帧掉帧 - 父容器有
overflow: hidden且子元素transform超出边界 → 动画被裁剪或卡顿 - 用
top/left替代transform→ 触发 layout 重排，严重掉帧 -
opacity: 0但z-index仍高于其他元素 → 遮挡点击或视觉干扰，应同步设visibility: hidden或降级z-index - 多卡片轮播时仅靠
animation-delay，没手动设递增z-index（如 10/20/30）→ 后入场卡片被先入场的盖住
最常被忽略的一点：z-index 生效的前提是 stacking context 已建立，而父容器的 opacity、transform、filter 等属性会悄悄创建新的 stacking context，直接覆盖子元素的 z-index 作用域——调试时得一层层检查父级是否意外截断了层级链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
