transition加!important反而失效，因其将过渡声明变为高优先级“一次性快照”，破坏其需持续监听属性变化的机制；应改用@layer分层管理或基础类固定声明。
transition加!important为什么反而失效
直接给transition属性加!important，不是“加强动画”，而是把它变成一个高优先级但不稳定的快照——浏览器只在样式计算那一刻取值，后续类切换或状态变化时，它可能被其他无!important的transition: none覆盖，或干脆被忽略。典型现象是：hover进有动画，hover出直接跳变；JS切换class后动画只触发一次。
根本原因在于：transition需要持续存在才能监听属性变化，而带!important的声明容易被层叠逻辑“踢出”稳定上下文。验证方式很简单：打开 DevTools → Elements → Computed 样式，看transition是否在所有状态下都稳定显示，而不是只在某个class激活时才出现。
用@layer替代!important控制过渡优先级
Chrome 100+ 已原生支持@layer，它是W3C推荐的现代解法，能主动定义样式层顺序，比拼选择器权重干净得多。
- 把基础过渡规则放在独立层里：
@layer transitions { .fade { transition: opacity 0.2s ease; } } - 业务样式或UI库写在更低层（如
@layer base），就不会意外覆盖transition - 层内规则按书写顺序覆盖，层间按
@layer声明顺序决定优先级，完全绕开!important博弈
注意：@layer必须全局统一声明（通常放在CSS最顶部），且不能嵌套在@media或组件作用域内——否则会降级为普通规则。
立即学习“前端免费学习笔记（深入）”；
用基础类固定transition声明
与其靠!important硬扛，不如让transition始终“在线”。推荐做法是把过渡声明抽成独立基础类，在HTML中长期保留：
- 写法示例：
.transition-opacity { transition: opacity 0.2s ease; } - HTML中始终带上：
<div class="card transition-opacity"> - 状态变更只改其他类（如
.is-hidden），不碰transition-opacity - 避免单类名写法（如
.card { transition: ... }），否则.card.active这种后续规则极易覆盖掉transition
如果需JS动态控制，改用data-属性：[data-transition="fade] + element.dataset.transition = "slide"，CSS用属性选择器匹配，更可控也更易测试。
display: none和!important一起用必踩坑
哪怕transition写得再对，只要同时涉及display: none ↔ block切换，动画就必然失败——这不是!important的问题，而是浏览器直接跳过整个过渡流程。
解决办法只有两个：
- 用
visibility: hidden+opacity替代display切换 - 或者用
max-height、transform等可过渡属性做“伪显隐”
特别提醒：某些预处理器（如Sass嵌套规则）会悄悄注入!important，检查编译后的CSS是否意外污染了transition——这是最隐蔽的失效源头。
