应将语义明确、高频且变化少的transition组合抽为公共class，如.trans（all 0.2s ease）、.trans-fade-up（opacity+transform）、.trans-color（background-color+color）；避免抽强场景依赖的声明，禁用过渡无效属性，并优先按需声明关键属性而非all。
transition 属性写太多 class 太重复？用公共 class 抽离通用过渡声明
直接给结论：把常用的 transition 声明抽成一个或几个公共 class（比如 .trans、.trans-fast），比在每个组件里重复写 transition: all 0.2s ease 更可控、更易维护。
哪些 transition 值适合抽成公共 class？
不是所有过渡都适合统一。重点抽那些「语义明确 + 频率高 + 变化少」的组合：
-
transition: all 0.2s ease→ 适合按钮 hover、卡片展开等轻量交互，可命名为.trans -
transition: opacity 0.15s linear, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)→ 适合模态框淡入+上滑，可命名为.trans-fade-up -
transition: background-color 0.25s ease, color 0.25s ease→ 适合主题色切换，避免全属性触发重绘，可命名为.trans-color
别抽 transition: width 0.3s ease-in-out 这类强场景依赖的——它只对特定元素有意义，硬塞进公共 class 反而容易误触发。
为什么不能只写 .trans { transition: all 0.2s ease; }？
看似省事，但隐患明显：
-
all会监听所有可动画属性，哪怕你只改了display或z-index，浏览器也会尝试过渡（虽然无效，但可能触发 layout / paint） - 某些属性（如
height: auto）根本无法过渡，导致预期失效 - 调试时难定位：某个元素突然“卡一下”，查不到是哪个
transition在起作用
更稳妥的做法是按需声明关键属性：
.trans-opaque { transition: opacity 0.15s ease; }
.trans-move { transition: transform 0.2s ease; }
.trans-bg { transition: background-color 0.25s ease; }
配合 :is() 或自定义属性实现灵活组合
纯 class 组合有时不够动态。现代方案可以结合 CSS 自定义属性或逻辑选择器：
- 用
:is()减少重复选择器：.btn, .card, .nav-link { transition: var(--trans, opacity 0.15s ease); }再在具体元素上设style="--trans: background-color 0.2s ease;" - 或者用
:is(.trans-bg, .trans-move)批量挂载，比写三遍选择器干净 - 注意 Safari 旧版本不支持
:is()，生产环境需加前缀或回退
真正麻烦的从来不是多写一行 transition，而是过渡行为失控后花半天排查哪个 class 悄悄覆盖了另一个——公共 class 的价值，在于让变化可预期、可追溯、可收敛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
