transition-duration必须显式设置非零带单位值（如0.3s），否则动画失效；多属性过渡需按顺序匹配时长；height:auto无法插值，应改用max-height或transform；transition-delay仅控制启动时机，不影响动画时长。
transition-duration 必须显式写非零值
不写 transition-duration 或写成 0、0s、none，动画就完全不会动——浏览器默认值就是 0s，等于“瞬间切换”。哪怕其他三项（property、timing-function、delay）都对，只要 duration 是 0，computed 面板里看到的最终值就是 0s，过渡直接失效。
实操建议：
-
transition-duration只接受带单位的时间值：0.3s或250ms，不能省略单位 - 低于
50ms（即0.05s）人眼基本无法识别，慎用过短值 - 负值（如
-0.1s）会让整条transition声明被浏览器忽略 - 调试时优先打开 DevTools → Elements → Styles → 查看 computed 中的
transition-duration实际生效值，比反复改代码更快
多属性过渡时 duration 怎么配才不踩坑
当你同时过渡多个属性（比如 opacity 和 transform），transition-duration 可以统一写一个值，也可以按顺序分别指定。但顺序错位、缺项或混用简写，都会导致部分属性没动画。
实操建议：
- 统一时长：用逗号分隔属性，duration 写一次 ——
transition: opacity 0.2s, transform 0.2s; - 不同时间：duration 按属性顺序一一对应 ——
transition: opacity 0.2s, transform 0.35s;，这里opacity用0.2s，transform用0.35s - 避免混写：
transition: opacity 0.2s;和transition-duration: 0.35s;同时存在时，后者会被前者覆盖（CSS 层叠规则） - 别依赖
all：写transition: all 0.3s;会把display、z-index这类不可动画属性也卷进来，无效且可能拖慢渲染
为什么 height: auto 切换没过渡效果
height: auto 不是具体数值，浏览器无法插值计算中间状态，所以无论 transition-duration 设多长，都不会触发动画。这是最常被误以为“transition 失效”的真实原因。
实操建议：
- 想让高度展开有过渡，必须两端都是具体值：比如
height: 0→height: 200px - 若内容高度不确定，改用
max-height（设一个足够大的上限值，如max-height: 500px）配合overflow: hidden - 更稳妥的做法是 JS 测量真实高度后，再动态设置
height的起止值，避免硬编码 - 优先用
transform: scaleY()或opacity替代 height 动画，它们支持 GPU 加速，更流畅
transition-delay 是延迟开始，不是延长总时长
transition-delay: 0.5s 的意思是“等 0.5 秒后再开始执行过渡”，不是“整个动画持续 0.5 秒”。如果 duration 是 0.3s，那从触发到结束总共耗时 0.8s，但动画本身只占后半段。
实操建议：
- 延迟常用于错峰动画，比如菜单项逐个出现，可对每个子元素设递增的
transition-delay - 注意：delay 不影响动画节奏，只控制启动时机；真正决定快慢的是
transition-duration和transition-timing-function - 和
animation-delay不同，transition-delay不支持负值回溯（比如-0.1s无效）
color: currentColor 切换到 #333，或用了 inherit 这类无法计算中间态的值。调不出来时，盯着 computed 面板看 transition-property 和 transition-duration 的实际生效值，比猜更可靠。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
