应抽离常用动效逻辑封装为语义化通用class，如.fade-in、.slide-up等，并通过data属性、组合class及CSS自定义属性统一管理时长、缓动等参数，提升可维护性与灵活性。
过渡效果写多了，确实容易让 CSS 文件越来越臃肿，尤其每个元素都单独写 transition、transform、opacity 等，既重复又难维护。最直接的解法，就是抽离常用动效逻辑，封装成语义清晰、开箱即用的通用 class。
按动效类型封装基础过渡 class
把高频出现的过渡组合打包成 class，比如淡入、滑入、缩放、弹性入场等，避免每次重复写属性和时长：
-
.fade-in：
opacity: 0 → 1+transition: opacity .3s ease -
.slide-up：
transform: translateY(20px) → translateY(0)+transition: transform .4s cubic-bezier(0.22, 0.61, 0.36, 1) -
.scale-in：
transform: scale(.95) → scale(1)+transition: transform .35s ease-out
这些 class 可以直接加在 HTML 元素上，配合 JS 控制 class 的添加/移除（如 element.classList.add('fade-in')），实现声明式动效。
用 data 属性支持动态参数
纯 class 不够灵活？可以用 data- 属性控制时长、缓动或方向，再配合少量 JS 或 CSS 自定义属性驱动：
立即学习“前端免费学习笔记（深入）”；
<div class="transition" data-duration="0.5s" data-easing="ease-in-out">- CSS 中用
[data-duration] { transition-duration: attr(data-duration); }（注意浏览器兼容性，部分需 JS 补充） - 更稳妥的做法是：用 JS 读取 data 值，动态设置
style.transition或切换预设 class（如.duration-500、.ease-in-out）
组合 class 实现复合动效
单个过渡 class 只做一件事，多个 class 可叠加使用，保持正交性：
<button class="fade-in slide-up duration-400 ease-cubic">提交</button>- 其中
.duration-400统一设置transition-duration: .4s，.ease-cubic对应cubic-bezier(0.42, 0, 0.58, 1) - 这样既能复用，又保留调整空间 —— 比如只改时长不影响动效类型
配合 CSS 自定义属性统一管理变量
把过渡的“常量”提到 :root，方便全局调控：
:root { --t-duration: .3s; --t-easing: ease; --t-scale: 1.02; }- 所有过渡 class 都基于这些变量，比如
.hover-scale { transform: scale(var(--t-scale)); transition: transform var(--t-duration) var(--t-easing); } - 换主题或调速时，只需改 :root 里的值，全站动效同步更新
