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 形同虚设。因为浏览器还没完成首帧样式拍板，就收到了终态指令，中间缺少可锚定的“起点”。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 不要在同步代码里连续写 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 更接近“零延迟”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！