transition被覆盖是层叠中后声明规则全量替换前值，非叠加；须用computed面板查transition-property和duration是否为none或0s，定位胜出规则并统一收口至基础类。
transition被覆盖不是“没写对”，而是它在层叠过程中被另一条规则彻底替换了——浏览器只认最后生效的那一条，不会叠加、不会继承。
用Computed面板确认transition是否真生效
DevTools 的 Styles 面板里看到 transition: all 0.3s 并不等于它在动。必须切到 Computed 标签页，搜索 transition-property 和 transition-duration：
- 如果值是
none或0s，说明被覆盖或重置了 - 如果
transition-property显示为空或只列了部分属性（比如只有opacity），而你期望transform也动，那就是其他规则把整条声明覆盖掉了 - 点击右侧的链接能直接跳转到胜出的那条 CSS 规则，立刻定位源头
多个类同时写transition时后声明的会全量覆盖
这是最隐蔽的覆盖场景：两个类都写了 transition，但它们不会合并，而是后者完全取代前者。
-
.card { transition: opacity 0.2s; }+.card--expanded { transition: transform 0.3s ease; }→ 激活--expanded后，opacity就失去过渡能力 - 解决方法不是加
!important（反而会让 transition 变成不稳定快照），而是统一收口：.card { transition: opacity 0.2s, transform 0.3s ease; }，状态类只管改值 - 避免在 JS 中动态写
el.style.transition = "..."，它会覆盖所有 CSS 声明，且无法被后续 class 恢复
全局重置或框架样式悄悄干掉了transition
像 Tailwind 的 !transition-none、Normalize.css 的通配符重置、甚至某些 UI 库的 * { transition: none !important; }，都会让你的 transition 彻底失效。
- 在 Computed 面板里看到
transition-property: none，且来源标着user agent stylesheet或某个第三方 CSS 文件，基本就是它 - 检查是否有
!important出现在更高优先级的选择器中（比如.btn:focus { transition: none !important; }） - 用
@layer主动分层可破局：@layer base { * { transition: none; } }+@layer transitions { .anim { transition: opacity 0.3s; } }，确保动画层不被压住
真正难排查的不是“哪里写的错”，而是“哪条规则赢了”——Computed 面板里那个绿色的、带文件名和行号的 transition 值，才是唯一可信的事实。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
