用 transition-delay 配合 :nth-child 可实现多元素交错入场，需注意延迟值设置、CSS变量动态控制、失效原因及与 animation-delay 的区别。
transition-delay 配合 :nth-child 实现交错入场
多个元素用同一个 transition 时，想让它们依次动起来，核心不是靠 JS 控制，而是靠 CSS 的 transition-delay 批量设不同延迟值。最直接的写法是结合 :nth-child，比如 5 个按钮，延迟分别是 0s、0.1s、0.2s……
- 别用
:nth-of-type替代:nth-child，除非你确定父容器里只有目标元素；混有文字节点或其他标签时，:nth-of-type容易错位 - 延迟值建议用小数（如
0.15s），避免整数秒导致动画“卡顿感”明显 - 如果元素数量不固定（比如由 JS 动态插入），纯 CSS 方案会失效，得切到 JS +
setTimeout或 CSS 自定义属性注入
button {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
button:nth-child(1) { transition-delay: 0s; }
button:nth-child(2) { transition-delay: 0.1s; }
button:nth-child(3) { transition-delay: 0.2s; }
用 CSS 自定义属性动态控制 delay 值
当需要响应式调整延迟节奏，或配合主题切换、动画速度偏好设置时，硬写死 :nth-child(n) 规则太僵硬。改用 --delay 自定义属性更灵活，JS 可随时更新，CSS 也能用 calc() 组合计算。
- 必须给每个元素单独设
style="--delay: 0.15s"，不能只在父级设——CSS 变量不继承，但会从父级 级联 到子元素，而transition-delay不接受变量级联，必须显式绑定 -
transition-delay: var(--delay, 0s)中的默认值很重要，否则未设变量的元素会直接跳过动画 - 注意 Safari 对
var()在transition-delay中的支持较晚（iOS 15.4+ 才稳定），老版本会退化为无延迟
<div class="list">
<div style="--delay: 0s">Item 1</div>
<div style="--delay: 0.12s">Item 2</div>
<div style="--delay: 0.24s">Item 3</div>
</div>
.list > div {
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.17, 0.67, 0.83, 0.67);
transition-delay: var(--delay, 0s);
}
transition-delay 失效的三个典型原因
写了 transition-delay 却没看到延迟效果，大概率不是语法错，而是触发条件没满足。常见于初始渲染、类名切换或 display 变化场景。
-
display: none→block切换后，transition-delay不生效：因为元素重绘时状态被重置，得先设成opacity: 0; visibility: hidden;，再通过 JS 或 class 切换visibility: visible和opacity - 用
classList.toggle()切换动画类，但 class 内没定义起始态（比如没设opacity: 0），浏览器找不到“变化起点”，延迟就丢了 - 父元素用了
will-change: transform，某些 Chrome 版本下会干扰transition-delay解析，临时去掉测试是否恢复
和 animation-delay 混用时的优先级陷阱
一个元素同时写了 transition-delay 和 animation-delay，动画不会叠加延迟，而是按 CSS 级联规则各自生效——但视觉上容易误判谁在主导。
-
animation-delay控制的是整个@keyframes动画的启动时机，transition-delay控制的是属性变化的响应时机，二者作用域不同，但都影响“什么时候开始动” - 如果
animation和transition修改同一属性（比如都改transform），animation会完全接管该属性，transition彻底失效，哪怕它先写 - 调试时用 DevTools 的 Animations 面板看实际触发时间，比肉眼数帧更可靠；注意面板里显示的 delay 值是否和代码一致，有时 computed 值会因继承或 calc 折算出意外结果
过渡延迟本身很简单，真正难的是在 DOM 动态增删、服务端渲染首屏、无障碍焦点顺序这些边界场景里，保持 delay 节奏不崩。很多人卡在第 3 步——以为是写法问题，其实是元素还没挂载完成就被加了 class。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
