CSS3 transition为什么在老项目里失效？

transition在老项目中失效的根本原因是未持续存在于计算样式中，常见于被高优先级规则覆盖、JS移除含transition的class、使用transition:all误触不可过渡属性、初始值缺失为auto/initial等场景。

transition 在老项目里失效，通常不是语法写错了，而是它根本没“活”下来——被覆盖、被删掉、或压根没在正确的地方声明。

transition 被更高优先级规则覆盖了

老项目常引入 normalize.css、重置库、或全局 * { transition: none !important; } 这类兜底规则。哪怕你写了 transition: opacity 0.3s;，Computed 面板里看到的 transition-property 也可能是 none。

1. 打开 DevTools → Elements → Computed → 搜索 transition，确认 transition-property 和 transition-duration 的值是否非 none 且大于 0s
2. 检查 Styles 面板中是否有带 !important 的过渡重置（比如某些 UI 框架的 reset.css）
3. 避免用通配符重置：把 * { transition: none; } 改成更具体的范围，例如只对表单控件重置

JS 切换 class 时 transition 声明被连带移除了

老项目里常见这种写法：el.classList.remove("fade-out"); el.classList.add("fade-in");。一旦 fade-out 类里定义了 transition，它就被一并删掉了——浏览器瞬间失去过渡上下文，直接跳到终态。

1. 把 transition 抽出来，单独放在一个永不被移除的基础类里，例如：.has-transition { transition: opacity 0.4s, transform 0.3s; }
2. 状态类只负责属性值：.is-hidden { opacity: 0; transform: translateY(10px); }
3. 别在 JS 中直接写 el.style.transition = "..." 或 el.style.opacity = "0"，这会覆盖 CSS 中的声明

用了 transition: all 却误改了不可过渡属性

老代码里爱写 transition: all 0.3s;，看着省事，但只要某个属性不支持过渡（比如 display、height: auto、z-index），整条声明就静默失效——浏览器不报错，也不动画。

1. 显式列出要过渡的属性：transition: opacity 0.3s, transform 0.3s, margin-left 0.2s;
2. 高度变化别用 height: auto，改用 max-height 或先读取 offsetHeight 再设为固定像素值
3. 显隐控制别只靠 display，组合用：opacity + visibility + pointer-events

初始值缺失或为 auto/initial

transition 需要明确起点。老项目里很多元素依赖默认样式或继承，比如没写 left: 0 就直接在 hover 里写 left: 20px，第一次变化时浏览器拿到的是 left: auto → 20px，无法插值，直接跳变。

1. 所有参与过渡的属性，必须在基础选择器中显式声明初始值，例如：.slider { left: 0; transition: left 0.3s; }
2. 用 Computed 面板确认该属性当前计算值不是 auto 或 initial
3. 背景图切换要生效，必须显式写 transition: background-image 0.3s;，不能指望 all

最常被忽略的一点：transition 不是「设置一次就管用」的开关，它是持续存在的样式契约——只要你想让它动，它就得一直在 computed style 里待着，哪怕只是不动声色地守着。