transition-duration: 0s 不等于禁用过渡，它仍触发浏览器过渡机制，包括起始帧采集、属性监听注册和合成器管线介入，尤其在 safari 和旧版 chrome 中开销明显。
Transition-duration: 0s 并不等于“禁用过渡”
这是最常被误解的一点：transition-duration: 0s 仍会触发浏览器的过渡机制——它只是把持续时间设为零，但过渡的“起始帧采集”“属性监听注册”“合成器管线介入”这些开销依然存在。尤其在 Safari（iOS 16+、macOS Ventura 起）和旧版 Chrome（
真正移除 transition 的唯一可靠方式是删掉 transition 相关属性
想让元素完全绕过过渡管线，必须从 CSS 层面彻底剥离相关声明。仅靠 transition-duration: 0s 或 transition: none 都不可靠：transition: none 在部分浏览器（如 Firefox 120）中会被解析为 transition-property: none，但若已有 transition-property: all 在其他规则中生效，它仍会覆盖。
- ✅ 正确做法：用 JavaScript 动态移除整个
transition行内样式：el.style.transition = '' - ✅ 或重置为初始值（等效）：
el.style.transition = 'initial'（注意：IE 不支持initial） - ❌ 避免写
transition: 0s或transition-duration: 0s后再加!important—— 这无法阻止过渡系统激活 - ⚠️ 如果用 CSS 类控制，确保该类里**不包含任何
transition、transition-property、transition-duration等声明**，而不是只写transition-duration: 0s
动态切换时要注意 transitionend 事件残留
即使你清除了 transition，如果之前注册过 transitionend 监听器，且该监听器未被显式 removeEventListener，它仍可能在后续某次意外触发（例如父级样式变更间接引发子元素重绘），导致逻辑错乱。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 清除 transition 后，建议同步清理监听：
el.removeEventListener('transitionend', handler) - 若用事件委托，检查是否需过滤
event.propertyName—— 即使 duration 为 0s，某些浏览器仍会派发transitionend（Safari 尤其常见） - 更稳妥的做法：在添加 transition 前先清理旧监听，而非依赖“duration=0 就不会触发”
兼容性差异：哪些浏览器最“较真”
不同引擎对 0s 的处理粒度不同。实测中以下组合最容易暴露问题：
- Safari iOS 17.4+：对
transform+opacity组合动画，transition-duration: 0s仍会强制进入合成器管线，造成 layout → paint → composite 流水线延迟 - Chrome 110–114：当
transition作用于height或max-height且值为0s时，会短暂保留旧布局尺寸，造成 1 帧抖动 - Firefox 115+：相对最宽容，
transition: none多数场景可生效，但仍建议统一用el.style.transition = ''保证行为一致
真正安全的底线只有一条：要“无过渡”，就得让浏览器根本看不到 transition 相关 CSS 声明——不是设为零，而是让它不存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
