直接写死每个元素的transition-delay值最稳妥，需配合:nth-child(n)（不可用:nth-of-type）、显式声明transition属性、延迟值用小数秒（如0.15s），并确保单位统一、结构静态。
transition-delay 怎么配合 :nth-child 实现固定数量元素的交错入场
直接写死每个元素的 transition-delay 值最稳妥，尤其适用于列表项数量确定、结构静态的场景（比如导航菜单、固定 6 个卡片的首页模块）。关键不是“能不能”，而是“怎么设才不卡顿”。
-
:nth-child(n)必须用，不能换成:nth-of-type——父容器里只要混一个<span></span>或文本节点，:nth-of-type就会错位，延迟完全对不上 - 延迟值建议用小数秒，比如
0.15s、0.22s，避免整数秒（如0.2s和0.3s之间差太小，人眼难分辨；1s又太拖沓） - 每个元素必须显式声明过渡属性和延迟，例如：
button:nth-child(3) { transition: opacity 0.3s ease, transform 0.3s ease; transition-delay: 0.3s; }，漏掉transition声明，transition-delay无效
动态插入元素时，transition-delay 怎么保持序列效果
纯 CSS 的 :nth-child 在 JS 动态增删元素后立即失效——新插入的元素不会自动获得对应序号的延迟值。这时候必须让 JS 参与控制，但不是用 setTimeout 手动加 class，而是把延迟值“注入”到元素自身。
- 给每个动态生成的元素直接写内联样式：
<div style="--delay: 0.18s">Item</div>，注意是每个元素单独设，不是只设父容器 - CSS 中统一写：
div { transition-delay: var(--delay, 0s); }，默认值0s很关键，否则没设变量的元素会直接跳过动画 - Safari 旧版本（iOS 15.4 之前）不支持
var()在transition-delay中，会退化成无延迟，需要做兼容 fallback 或检测后降级
transition-delay 负值在序列动画里有什么实际用途
负延迟不是炫技，它能解决“悬停触发后动画不同步”的问题。比如一组卡片同时监听 :hover，但你想让中间那张先动、两边后动，用正延迟很难自然实现——负值才是解法。
- 假设所有卡片都有
transition: transform 0.6s ease，中间卡片设transition-delay: -0.2s，它就会立刻从动画进行到 0.2 秒的位置开始播放，视觉上“领先”其他元素 - 负值不能超过动画总时长，
transition-duration: 0.4s却设transition-delay: -0.5s，结果就是动画直接从终点状态开始，相当于没动 - 和正延迟混用时，务必统一单位（全用
s或全用ms），0.3s和300ms混写容易引发计算偏差
transition-delay 和 animation-delay 在序列动画里能混用吗
能，但必须清楚它们作用的对象完全不同：一个管“属性变化的起始时间”，一个管“关键帧动画的启动偏移”。混用不是叠加，而是分工。
- 如果某个元素既要靠
transition做 hover 缩放，又要靠@keyframes做循环旋转，两个 delay 可以共存：transition-delay: 0.1s; animation-delay: 0.3s; - 但不要指望
animation-delay能影响transition的触发时机——它只对animation生效；同理，transition-delay对@keyframes完全无效 - 当两者都存在且 delay 值接近时（比如都设
0.2s），视觉上看起来像“同步启动”，但底层机制毫无关联，调试时别误以为是同一个延迟在起作用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
