transition-delay 必须与 duration、property 配合使用才生效；单独设置无效，多属性延迟需严格对应顺序，JS 动态修改需强制重排或用 CSS 变量，悬停动画应配合 visibility 避免闪退。
transition-delay 必须和 duration、property 一起用才有效
单独写 transition-delay: 0.3s 是合法语法，但浏览器直接忽略——它不是独立开关，而是 transition 这个复合流程里的一个环节。没有 transition-duration，就没有“过渡”这件事；没有 transition-property，就不知道该对哪个值做插值。
常见错误写法：
-
transition-delay: 0.2s;（孤立存在，无效） -
transition: all 0.3s;（漏了 delay 位置，想加延迟却没地方放）
正确简写必须四要素齐全，顺序不能错：transition: background-color 0.3s ease 0.2s。哪怕想用默认 ease 和默认 all，也得显式写出来：transition: all 0.3s ease 0.2s。
多个属性不同延迟，别只靠一个 transition-delay
当你想让 opacity 0.1s 后开始、transform 0.4s 后开始，不能只设 transition-delay: 0.1s, 0.4s 然后指望它自动匹配——必须保证所有子属性值数量一致且顺序严格对应。
立即学习“前端免费学习笔记（深入）”；
推荐两种写法：
- 逗号分隔简写：
transition: opacity 0.2s ease 0.1s, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s - 拆开声明（更清晰）：
transition-property: opacity, transform+transition-duration: 0.2s, 0.3s+transition-timing-function: ease, cubic-bezier(0.25, 0.46, 0.45, 0.94)+transition-delay: 0.1s, 0.4s
少写一个 delay 值，后面那个 transform 的延迟就变成 0；多写一个，多余项被丢弃。
JS 动态改 delay 容易跳过动画，得强制重排
直接改 el.style.transitionDelay = '0.5s' 后立刻触发状态变化，浏览器大概率沿用旧的 transition 全值，新 delay 不生效。核心问题是：浏览器缓存了上一次过渡的计算上下文。
安全做法分三步：
- 先清空过渡：
el.style.transition = 'none' - 强制同步布局（触发重排）：
el.offsetHeight（任意读取 layout 属性都行） - 再设完整 transition：
el.style.transition = 'opacity 0.2s ease 0.5s'
更轻量的替代方案是用 CSS 自定义属性：transition: opacity 0.2s ease var(--delay)，JS 只改 el.style.setProperty('--delay', '0.5s')，避免手动拼接字符串和重排开销。
悬停菜单/弹层加 delay 要配 visibility 防闪退
用 :hover 触发下拉菜单时，如果只靠 opacity + transition-delay，收起瞬间会“啪”一下消失——因为 opacity 变为 0 后，元素还占着布局空间，视觉上像卡顿。
真正平滑的做法是组合三个属性：
- 初始态：
opacity: 0; transform: translateY(-8px); visibility: hidden - 悬停态：
opacity: 1; transform: translateY(0); visibility: visible - 过渡声明：
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s 0.25s
这里关键在 visibility 0s 0.25s：它让 visibility 在 opacity 动画结束（0.25s 后）才切换，既避免布局抖动，又防止鼠标移出时内容未完全淡出就被隐藏。
最容易被忽略的一点：delay 不是“等多久才动”，而是“等多久才开始插值”。如果起始值和结束值之间根本没发生可动画的数值变化（比如从 auto 到具体像素、或 display: none 切换），再大的 delay 也看不到效果。
