transition-delay 必须与 transition-property 和 transition-duration 同时存在才生效；单独设置无效，多属性不同延迟需用逗号分隔或分别声明，JS 动态修改时应重置 transition 并强制重排。
transition-delay 不是独立的 CSS 属性，它只是 transition 复合属性的一部分，不能单独设置或生效。直接写 transition-delay: 0.3s 是合法的，但若没配对 transition-property 和 transition-duration，延迟根本不会触发。
为什么写了 transition-delay 却没效果？
常见错误是只设延迟，忽略过渡的“存在前提”：必须同时声明变化的属性（如 color、transform）、持续时间（transition-duration），否则浏览器不启动过渡流程。
- ❌ 错误写法：
transition-delay: 0.5s;（孤立使用，无 duration / property） - ✅ 正确写法：
transition: background-color 0.3s ease 0.2s;（顺序：property duration timing-function delay） - ⚠️ 注意：如果用简写
transition，delay必须放在第 4 位，且前 3 项不能省略（即使想用默认值也要显式写出来，比如all 0.2s ease 0.1s）
transition-delay 在多属性过渡中怎么控制不同延迟？
当多个属性需要不同延迟时，不能靠单个 transition-delay 统一设置——必须拆成多个 transition 声明，或用逗号分隔的复合写法。
- ✅ 推荐写法（逗号分隔）：
transition: opacity 0.2s ease 0.1s, transform 0.3s ease 0.4s; - ✅ 等效写法（分开声明）：
transition-property: opacity, transform;+transition-duration: 0.2s, 0.3s;+transition-timing-function: ease, ease;+transition-delay: 0.1s, 0.4s; - ⚠️ 注意：两组值必须数量一致，否则多余项被忽略；顺序错位（比如 delay 少一个）会导致后半部分延迟失效
JavaScript 动态设置 transition-delay 的坑
用 JS 修改 style.transitionDelay 时，容易忽略「过渡已开始」导致延迟被跳过，或因内联样式优先级高而覆盖 CSS 规则。
立即学习“前端免费学习笔记（深入）”；
- ✅ 安全做法：先移除 transition，再加回带新 delay 的完整
transition值：el.style.transition = 'none';</code><br><code>el.offsetHeight; // 强制重排，清空上一次过渡状态</code><br><pre class="brush:php;toolbar:false;">el.style.transition = 'opacity 0.2s ease 0.3s';
- ⚠️ 避免直接改
style.transitionDelay 后立刻触发动画，此时浏览器可能仍沿用旧的 <code>transition全值，新 delay 不生效 - ? 小技巧：用 CSS 自定义属性（
--delay: 0.3s）配合transition: opacity 0.2s ease var(--delay)，JS 只需改style.setProperty('--delay', '0.5s')，更干净
真正难的不是写对语法，而是理解 transition-delay 依赖整个过渡链路的存在——缺 duration 就像没拧开阀门，缺 property 就像没选对水管，光有 delay 只是给空气计时。
