transition在老项目中失效的根本原因是未持续存在于计算样式中，常见于被高优先级规则覆盖、JS移除含transition的class、使用transition:all误触不可过渡属性、初始值缺失为auto/initial等场景。
transition 在老项目里失效，通常不是语法写错了，而是它根本没“活”下来——被覆盖、被删掉、或压根没在正确的地方声明。
transition 被更高优先级规则覆盖了
老项目常引入 normalize.css、重置库、或全局 * { transition: none !important; } 这类兜底规则。哪怕你写了 transition: opacity 0.3s;，Computed 面板里看到的 transition-property 也可能是 none。
- 打开 DevTools → Elements → Computed → 搜索
transition，确认transition-property和transition-duration的值是否非none且大于0s - 检查 Styles 面板中是否有带
!important的过渡重置（比如某些 UI 框架的 reset.css） - 避免用通配符重置：把
* { transition: none; }改成更具体的范围，例如只对表单控件重置
JS 切换 class 时 transition 声明被连带移除了
老项目里常见这种写法：el.classList.remove("fade-out"); el.classList.add("fade-in");。一旦 fade-out 类里定义了 transition，它就被一并删掉了——浏览器瞬间失去过渡上下文，直接跳到终态。
- 把
transition抽出来，单独放在一个永不被移除的基础类里，例如：.has-transition { transition: opacity 0.4s, transform 0.3s; } - 状态类只负责属性值：
.is-hidden { opacity: 0; transform: translateY(10px); } - 别在 JS 中直接写
el.style.transition = "..."或el.style.opacity = "0"，这会覆盖 CSS 中的声明
用了 transition: all 却误改了不可过渡属性
老代码里爱写 transition: all 0.3s;，看着省事，但只要某个属性不支持过渡（比如 display、height: auto、z-index），整条声明就静默失效——浏览器不报错，也不动画。
立即学习“前端免费学习笔记（深入）”；
- 显式列出要过渡的属性：
transition: opacity 0.3s, transform 0.3s, margin-left 0.2s; - 高度变化别用
height: auto，改用max-height或先读取offsetHeight再设为固定像素值 - 显隐控制别只靠
display，组合用：opacity+visibility+pointer-events
初始值缺失或为 auto/initial
transition 需要明确起点。老项目里很多元素依赖默认样式或继承，比如没写 left: 0 就直接在 hover 里写 left: 20px，第一次变化时浏览器拿到的是 left: auto → 20px，无法插值，直接跳变。
- 所有参与过渡的属性，必须在基础选择器中显式声明初始值，例如：
.slider { left: 0; transition: left 0.3s; } - 用 Computed 面板确认该属性当前计算值不是
auto或initial - 背景图切换要生效，必须显式写
transition: background-image 0.3s;，不能指望all
最常被忽略的一点：transition 不是「设置一次就管用」的开关，它是持续存在的样式契约——只要你想让它动，它就得一直在 computed style 里待着，哪怕只是不动声色地守着。
