transition-duration: 0仍感延迟的根本原因是浏览器未进入过渡流程，起因包括初始值未显式声明、transition-property设为none或属性不可动画，而非时长本身。
transition-duration: 0 触发后仍感觉有延迟，根本不是“动画慢”，而是浏览器没走过渡路径
写 transition-duration: 0 本意是想“立刻切换”，结果 hover 或 class 切换后还是卡顿、跳变、甚至有毫秒级延迟——这不是 duration 没生效，而是浏览器压根没进入 transition 流程。真正原因通常是：起始值未显式声明，或 transition-property 被设为 none，或属性本身不可动画。
-
opacity、transform等属性必须有明确初始值（如opacity: 1），否则从auto或未计算状态出发，浏览器无法插值 → 直接跳变，但 JS 执行和样式计算仍有微小开销，造成“延迟感” - 写了
transition: all 0s不等于“无过渡”，而是触发一次“零时长插值”——部分浏览器仍会走 layout → paint 流程，尤其当属性含width、height时 -
transition-property: none是唯一能彻底关闭过渡的写法；transition-duration: 0只是让动画快到看不见，不代表不计算
为什么 transition-duration: 0 在 JS 动态加 class 时特别容易失效
JS 批量操作 DOM 后立即加 class，常导致 transition-duration: 0 形同虚设。因为浏览器还没完成首帧样式拍板，就收到了终态指令，中间缺少可锚定的“起点”。
- 不要在同步代码里连续写
el.classList.add('active')和样式修改，哪怕 duration 是 0 - 若需确保零延迟响应，用
requestAnimationFrame延迟到下一帧再加 class，给浏览器留出计算初始值的时间 - 更稳妥的做法是：直接用
el.style.setProperty('opacity', '0.8')绕过 CSS transition 机制——适合纯 JS 控制的瞬时反馈场景
transition-duration: 0 和 visibility / display 切换的混淆
很多人以为设 transition-duration: 0 就能替代 visibility: hidden 或 display: none 的切换，这是误区。这两者行为完全不同：
-
visibility: hidden+transition: opacity 0s：元素占位，仅视觉隐藏，opacity 插值仍发生（哪怕 0s） -
display: none：元素完全脱离渲染树，任何transition都不生效，duration再小也没用 - 想实现“真·瞬切”，优先用
visibility+opacity组合，并确保transition-property明确包含opacity
Chrome DevTools 里怎么看 transition-duration: 0 到底有没有走过渡
别只信 Styles 面板里划掉的那行 transition-duration，得看实际执行路径：
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → Rendering 面板 → 勾选 “Paint flashing”：如果闪绿色，说明即使 duration 是 0，浏览器仍在做 paint
- Performance 面板录制一次 hover 操作 → 展开 “Layout” 和 “Update Layer Tree”：看到 layout 条目，说明触发了重排，和 duration 无关
- Computed 面板查
transition-property最终值：如果是none，那duration再小也白搭
0，而是你没意识到 transition 机制本身就有启动成本。删掉 transition 声明，比设成 0 更接近“零延迟”。 
