加 !important 会导致 transition 失效，因其将过渡声明变为高优先级“一次性”规则，破坏其需持续存在的机制；应改用高特异性选择器或基础类固定 transition 声明。
transition 声明被 !important 覆盖导致失效
直接给 transition 属性加 !important 不但不能“加强”过渡效果，反而大概率让它失效。因为浏览器在计算样式时，会把带 !important 的 transition 视为一个高优先级的“一次性声明”，而非持续生效的状态监听器——而过渡恰恰依赖该声明在元素整个生命周期中稳定存在。
常见错误写法：transition: all 0.3s ease !important; 或通过 JS 的 style.setProperty('transition', '...') 强行注入 !important，结果是：类切换后过渡不触发、或只在进入时有效、退出时跳变。
- 根本原因：带
!important的transition很容易被后续无!important的同类声明覆盖（比如另一个 class 里写了transition: none;），且无法被浏览器当作“基础过渡上下文”保留 - 更隐蔽的问题：某些 CSS 预处理器（如 Sass）在嵌套规则中自动插入
!important，可能意外污染transition - 验证方式：打开开发者工具 → Elements 面板 → 查看 Computed 样式里的
transition是否始终存在（而非仅在 hover 或某个 class 激活时才出现）
用更高权重的选择器替代 !important
真正需要的是让 transition 声明“稳住不动”，而不是靠 !important 硬扛。提升选择器特异性（specificity）更可靠、更可控。
- 避免单类名写法：
.card { transition: opacity 0.2s; }—— 容易被后续.card.active { opacity: 0; }这类规则无意覆盖掉transition - 推荐基础类组合：
.card.transition-enabled { transition: opacity 0.2s, transform 0.2s; }，并在 HTML 中始终保留transition-enabled - 若需 JS 控制，用属性选择器强化：
[data-transition="slide"] { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }，JS 只改data-transition值，不碰 class - 慎用 ID 选择器（如
#header { transition: ... }）——虽然权重高，但破坏可复用性，且与 Shadow DOM 兼容性差
display: none 切换时 transition 失效的连带影响
当同时使用 !important 和 display 切换（比如 display: none ↔ block），过渡几乎必然失败。这不是 !important 的锅，而是 display 变化会强制浏览器跳过整个过渡流程——哪怕你给 opacity 加了再高的权重也没用。
- 典型现象：点击按钮后元素瞬间出现/消失，完全没动画，即使
opacity和transition都写对了 - 根源：
display: none会让元素脱离渲染树，浏览器无法获取其上一帧的几何或视觉状态，过渡失去插值基础 - 解法不是加权重，而是改用
visibility: hidden+opacity: 0+pointer-events: none组合；或者用max-height/height配合 overflow 实现“伪 display 切换” - 如果必须用
display，请确保transition声明存在于display: block状态的 class 中，且该 class 不被移除（即：不要在display: none的 class 里定义transition）
JS 动态设置 transition 时的权重陷阱
用 JS 直接操作 element.style.transition 或 style.setProperty('transition', ...)，本质上是在内联样式层写入，其天然权重高于所有外部 CSS 类——看似“赢了”，实则埋下隐患。
- 问题：内联
transition会被后续任何 class 中的transition: none覆盖（因为内联样式的!important优先级虽高，但普通内联值无!important时，仍输给带!important的 class） - 更麻烦的是：JS 设置后若未显式清除，会一直残留，干扰后续 class 切换逻辑
- 安全做法：只用 JS 控制状态类（如
el.classList.add('is-open')），把transition全部留在 CSS 中，用足够权重的选择器锁定 - 调试技巧：在开发者工具中禁用所有 CSS 文件，只留内联样式，看
transition是否还存在——能快速定位是 JS 写入问题还是 CSS 覆盖问题
最常被忽略的一点：transition 生效与否，和颜色、尺寸、z-index 等属性的权重无关，只取决于 transition 声明本身是否在计算样式中“持续、稳定、无冲突地存在”。加 !important 是在对抗 CSS 层叠规则，而过渡机制恰恰建立在层叠规则之上——方向反了，越用力越失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
