不能用同一个变量管所有过渡和动画，因为transition和animation触发机制、浏览器优化路径及用户预期完全不同；应分别定义fast/normal/slow过渡时长变量，并配合具体property、缓动函数及will-change使用，再通过可配置参数的@mixin封装逻辑。
为什么不能用同一个变量管所有过渡和动画
很多人一上来就定义 $duration: 0.3s，然后到处塞进 transition 和 animation 里——结果按钮悬停快得像弹窗，而模态框入场慢得让人误以为卡了。根本原因是：transition 和 animation 触发机制、浏览器优化路径、用户预期完全不同。混用一个变量，等于把油门和刹车绑在同一个踏板上。
怎么定义真正可用的过渡时长变量
过渡（transition）只响应属性变化，适合微交互；它需要更短、更精准的节奏。推荐在全局变量文件（如 _variables.scss）里单独定义：
-
$transition-duration-fast: 0.18s;—— 用于按钮 hover、开关 toggle -
$transition-duration-normal: 0.25s;—— 默认表单焦点、边框高亮 -
$transition-duration-slow: 0.35s;—— 仅用于视觉权重高的状态切换，比如折叠面板展开
注意：别省略分号，别写成 $transition-duration: 0.25s !default —— !default 在多层 import 时容易被意外覆盖，直接赋值更可控。
过渡时长必须配合 transition-property 使用
只写 transition: all $transition-duration-normal ease-out 是危险的。比如对 transform 和 color 同时过渡，但硬件加速只作用于 transform，color 还是走重绘，反而拖慢整体帧率。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 优先指定具体属性：
transition: background-color $transition-duration-fast ease-in, transform $transition-duration-fast ease-out; - 避免
all，尤其在滚动区域或高频交互组件中 - 加
will-change: transform;前置提示浏览器优化，但别滥用——只在真正需要时加
用 @mixin 封装过渡逻辑才真正可维护
变量只是数字，@mixin 才能把“动什么、怎么动、何时动”收口成一条规则。例如：
@mixin transition-bg-transform($dur: $transition-duration-fast) {
transition:
background-color $dur ease-in,
transform $dur ease-out;
will-change: transform;
}
调用时：.btn { @include transition-bg-transform($transition-duration-normal); }
关键点：
- 默认参数要符合高频场景，别设成
0.3s这种偏慢值 - 不要把
transition-timing-function硬编码进 mixin——不同属性常需不同缓动，应作为可选参数传入 - 如果组件同时用到 transition 和 animation，别试图用同一个 mixin 混合两者，语义混淆会放大后期调试成本
真正容易被忽略的是：Sass 变量和 mixin 都只在编译期生效。你改了 $transition-duration-fast，必须全量重编译才能生效——线上环境若用 CSS-in-JS 或 runtime 样式注入，这套方案就不适用了。
