正确做法是将属性名作为参数暴露，设安全默认值（如background-color、color），支持多属性组合传参，并按交互层级定义$transition-fast/.12s、$transition-normal/.2s、$transition-slow/.35s变量。
直接用 @mixin transition 封装，但必须带默认参数、支持多属性、防止单一属性覆盖全局过渡行为——否则改个 hover 动画会意外影响 loading 指示器的 fade 效果。
为什么不能只写 @mixin transition($duration: .2s)
这种写法看似简洁，实则埋雷：它强制所有调用处都走同一套 transition: all $duration ease，而真实项目里你根本不敢让 all 参与过渡——比如 height 和 opacity 的缓动曲线不同，box-shadow 突然参与会导致卡顿，更别说 transform 被降级到主线程渲染。
正确做法是把「属性名」也作为参数暴露出来，并设安全默认值：
-
$props默认为background-color, color, border-color—— 这些是视觉变化小、GPU 友好、且常需联动的属性 -
$duration和$easing保留默认值，但必须放在参数列表末尾 - 不提供
all作为默认选项；若真要全量过渡，显式传$props: all，责任明确
@mixin transition 必须支持多属性组合传参
按钮悬停要 background-color + transform，抽屉展开却只要 max-height + opacity。硬编码单属性 mixin 会逼你写一堆变体（transition-bg、transition-transform），违背复用初衷。
立即学习“前端免费学习笔记（深入）”；
SCSS 支持 list 参数，所以实际定义应类似：
@mixin transition($props: (background-color, color), $duration: .2s, $easing: ease) {
@if length($props) == 1 and nth($props, 1) == all {
transition: all $duration $easing;
} @else {
transition: $props $duration $easing;
}
}
调用时可灵活组合：
@include transition((transform, opacity), .3s, cubic-bezier(.4, 0, .2, 1))-
@include transition((border-color, box-shadow))—— 用默认时长和缓动
如何避免过渡动画在状态切换时互相干扰
常见错误是给 .btn:hover 加了 @include transition，结果点击后触发的 .btn.is-loading 状态动画被 hover 的过渡规则覆盖，loading 图标一闪就消失。
关键在于：过渡规则应绑定到「稳定状态类」上，而非伪类或临时状态：
- 把
@include transition写在.btn基础类里，而不是.btn:hover - 临时状态（如
.is-loading）只负责改opacity或visibility，不重写transition - 若需不同缓动，用独立 mixin（如
@mixin transition-instant）并确保其z-index或选择器权重更高
另外注意：CSS 过渡会继承，父容器写了 transition: opacity，子元素即使没声明也会响应 opacity 变化——这点容易被忽略，导致动画层层叠加失控。
要不要把过渡时间抽成变量？
要，但别只抽一个 $transition-base。真实 UI 中存在明显节奏分层：
- 微交互（icon hover、tag highlight）：
$transition-fast: .12s - 主控件反馈（button、switch）：
$transition-normal: .2s - 布局级变化（drawer、modal）：
$transition-slow: .35s
混合宏内部应优先读这些变量，而不是死写 .2s。例如：
@mixin transition($props: (background-color, color), $duration: $transition-normal, $easing: ease) { ... }
这样既能统一节奏，又保留了按场景覆盖的能力——比如 loading 遮罩入场用 $transition-slow，而关闭时用 $transition-fast，用户感知更自然。
