transition-delay 单独设置无效，必须与 transition-property 和 transition-duration 同时存在才能生效；浏览器仅在明确过渡属性、时长时才启用延迟逻辑。
transition-delay 单独写没用，必须和 transition-property、transition-duration 一起出现才生效。
为什么写了 transition-delay 却没延迟效果？
浏览器只在「明确知道要过渡什么属性、持续多久」的前提下，才会启用延迟逻辑。如果只写 transition-delay: 0.5s，CSS 解析器根本不会启动过渡流程。
- ❌ 错误示范：
transition-delay: 0.5s;（孤立声明，无 property、无 duration） - ✅ 正确写法之一（简写）：
transition: opacity 0.3s ease 0.5s;（注意顺序：property → duration → timing-function → delay） - ✅ 正确写法之二（拆开）：
transition-property: opacity;+transition-duration: 0.3s;+transition-delay: 0.5s; - ⚠️ 注意：
transition简写中，前 3 项（property、duration、timing-function）哪怕用默认值也得显式写出，不能省略。比如想延迟 0.2s 且用默认ease，得写成transition: all 0.2s ease 0.2s;，而不是transition: all 0.2s 0.2s;
多个属性不同延迟，怎么写？
一个 transition-delay 值只能对应一组过渡；要让 opacity 和 transform 各自按不同时间启动，必须用逗号分隔的多段声明，或拆成独立子属性。
- ✅ 推荐逗号分隔：
transition: opacity 0.2s ease 0.1s, transform 0.4s ease 0.6s; - ✅ 拆开写（等效）：
transition-property: opacity, transform;+transition-duration: 0.2s, 0.4s;+transition-delay: 0.1s, 0.6s; - ⚠️ 关键限制：各子属性值数量必须一致。如果
transition-property列了 2 个，但transition-delay只给了 1 个，第二个 delay 就会被忽略，对应属性将无延迟
JS 动态改 transition-delay 为什么经常失效？
直接改 el.style.transitionDelay = '0.3s' 后立刻触发状态变化，浏览器大概率沿用旧的 transition 全值，新 delay 不参与计算。
- ✅ 安全做法：先清空过渡，强制重排，再设完整
transition值el.style.transition = 'none';el.offsetHeight;（触发重排）el.style.transition = 'opacity 0.2s ease 0.3s'; - ⚠️ 避免在动画进行中反复修改 delay —— 浏览器可能跳过中间状态，只响应最后一次设置
- ? 提示：若需频繁控制时序，建议用 CSS 自定义属性（
--delay）配合transition: opacity 0.2s ease var(--delay);，JS 只改变量值，更稳定
真正容易被忽略的是「延迟依赖于完整过渡声明存在」这个前提——它不像 margin 或 color 那样独立生效，而是整个过渡机制的开关钥匙。一旦漏掉 transition-duration，transition-delay 就彻底失去意义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
