SCSS变量无法动态响应伪类或JS状态切换，仅适合定义项目级标准缓动档位；动态曲线需靠独立类名或JS切换整条transition声明。
为什么直接用 SCSS 变量控制 transition-timing-function 不够用
SCSS 变量（比如 $easing-standard）在编译时就固化为静态值，无法响应伪类、媒体查询或 JS 状态切换。你写 .btn:hover { transition-timing-function: $easing-interactive; }，最终输出的仍是固定字符串，不会因为用户点了按钮才“切换”缓动函数——它只是 CSS 规则里的一行死代码。
真正需要动态切换曲线的场景（如悬停变 cubic-bezier(0.2, 0.8, 0.4, 1)、点击变 ease-in），必须靠独立类名或 JS 切换整条 transition 声明，而不是指望变量“活过来”。
- 变量只适合定义项目级标准档位，比如统一入口动画用
$easing-entrance: cubic-bezier(0.3, 0, 0.4, 1); - 不要在组件文件里重定义同名变量，否则容易被覆盖且难以追踪
- 所有
@include调用都应显式传参，避免隐式依赖全局默认值
@mixin 封装过渡时，transition-timing-function 必须和 transition-duration 绑定传参
单独封装缓动函数没意义——它必须和持续时间一起参与计算，才能形成可复用的节奏单元。例如按钮缩放和模态框入场，时长不同、曲线也不同，但逻辑结构一致。
推荐写法是把二者设为可选参数，并强制要求顺序一致：
立即学习“前端免费学习笔记（深入）”；
@mixin transition-scale($duration: 0.25s, $easing: cubic-bezier(0.2, 0.8, 0.4, 1)) {
transition: transform $duration $easing, opacity $duration $easing;
}
- 多个属性过渡时，
transition-property、transition-duration、transition-timing-function必须数量严格一致，否则浏览器会静默截断多余项 - 如果只写一个
$easing，它会被复制到所有属性上；想给transform和opacity配不同曲线，得拆成两个独立@mixin或手动展开 - 避免用
all：比如transition: all 0.3s ease;会意外触发 layout，性能差且不可控
如何让同一组 @mixin 支持多种缓动语义（如 entrance / exit / interactive）
与其硬编码贝塞尔值，不如用语义化关键字映射到具体函数，既易读又便于批量调整。例如：
@function easing-map($type) {
@if $type == entrance {
@return cubic-bezier(0.3, 0, 0.4, 1);
} @else if $type == exit {
@return cubic-bezier(0, 0.3, 0.5, 1);
} @else if $type == interactive {
@return cubic-bezier(0.2, 0.8, 0.4, 1);
} @else {
@return ease-out;
}
}
@mixin transition-entrance($duration: 0.3s) {
transition: transform $duration easing-map(entrance), opacity $duration easing-map(entrance);
}
- 调用时写
@include transition-entrance(0.35s);，语义清晰，改easing-map一处，全项目更新 - 不建议用
map-get()查表方式——Sass 的 map 在函数内使用不够稳定，@if更直接可靠 - 这种模式适合中大型项目；小项目直接用变量+
@mixin参数更轻量
容易被忽略的兼容性与调试陷阱
缓动函数再漂亮，也救不了底层触发的重排。比如对 width 或 height 做 cubic-bezier(0.1, 0.9, 0.2, 1) 过渡，视觉上再顺滑，帧率也可能掉到 30fps——因为每次计算都触发 layout。
- 优先用
transform和opacity，它们走 GPU 合成层，缓动函数影响的是合成器插值节奏，不是主线程计算 - 旧版安卓 WebView 对
linear解析不稳定，真要匀速请写cubic-bezier(0, 0, 1, 1) - Chrome DevTools 动画检查器里点 timing function 小图标，可直接拖动贝塞尔控制点实时调参，比手算系数靠谱得多
-
steps()和cubic-bezier()别混用：前者是离散跳变，后者是连续变速，语义冲突，强行组合无实际效果
