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中长期保留：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 写法示例：.transition-opacity { transition: opacity 0.2s ease; }
• HTML中始终带上：<div class="card transition-opacity"> <li>状态变更只改其他类（如<code>.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——这是最隐蔽的失效源头。