封装动画时不能只传 animation 值，否则丧失对关键帧逻辑的控制；应让参数驱动 @keyframes 内部计算，如 $scale 影响 from 状态的 transform，$duration 控制整体节奏，并为复用高频动效拆分 @keyframes 与 animation 封装。
@mixin 封装动画时，为什么不能只传 animation 值？
因为那样等于放弃对关键帧逻辑的控制。比如写成 @mixin anim($value) { animation: $value; }，调用时传 slide-up 0.4s ease-out，看似省事，但后续想把同一组滑动逻辑复用于不同持续时间、不同起始偏移，就只能复制粘贴整段 @keyframes ——违背封装本意。
真正有用的封装，是让参数驱动关键帧内部计算，而不是拼接字符串。例如缩放值 $scale 直接参与 from 状态的 transform 计算，时长 $duration 影响的是整个动画节奏，不是仅改一个属性值。
- 每次
@include都生成独立@keyframes规则，哪怕参数完全相同（Sass 不做去重） -
@keyframes名必须全局唯一，不能靠@include动态作用域隔离 - 若真需共享关键帧，得拆成两个 mixin：
@mixin anim-keyframes+@mixin anim-use，但日常场景不值得
如何设计带参数的 @mixin 动画？以淡入+缩放为例
核心是把可变行为映射到参数，同时固定关键帧结构。下面这个 animate-in mixin 控制四个维度：时长、延迟、缓动曲线、初始缩放比例。
@mixin animate-in($duration: 0.3s, $delay: 0s, $easing: ease-out, $scale: 0.95) {
animation: in-anim $duration $delay $easing forwards;
@keyframes in-anim {
from {
opacity: 0;
transform: scale($scale);
}
to {
opacity: 1;
transform: scale(1);
}
}
}
-
$duration和$easing设默认值合理——多数入场动效确实趋同 -
$delay默认0s安全，但用于 stagger 场景时建议显式传参，避免隐式行为 -
$scale这类影响布局的参数，不要设默认值；宁可用@warn "scale is required"提示，也不给个看似通用实则误导的0.95
关键帧命名与性能隐患怎么避？
直接拼接参数进 @keyframes 名（如 in-anim-#{$duration}-#{$easing}）看似能复用，实际极易冲突且不可控。Sass 不支持在 @include 作用域内生成局部 @keyframes，所有生成的关键帧都挂载在全局 CSSOM 中。
更稳妥的做法：每个 mixin 定义专属、语义化、静态的关键帧名（如 in-anim、slide-up-anim），靠参数改变内部状态，而非靠名字区分逻辑。
- 避免在
0%和50%同时写相同transform，浏览器可能合并帧导致跳变 - 慎用
height/width动画，改用transform: scaleY()+overflow: hidden，触发 GPU 加速 - Safari 对
cubic-bezier()格式敏感，必须带单位（如0.2s不能写.2s），且括号内数值需严格为小数
什么时候该拆开写 @keyframes 和 animation？
当同一组关键帧要被多种参数组合反复调用时，比如一个 slide-up 动画，既要用在按钮上（0.2s），也要用在弹窗上（0.5s，0.1s delay），但关键帧结构完全一致——这时硬塞进 mixin 会导致重复生成多份 @keyframes slide-up-anim，浪费 CSS 体积。
此时更适合手动定义一次 @keyframes，再用轻量 mixin 只封装 animation 属性：
@keyframes slide-up-anim {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@mixin anim-slide-up($duration: 0.3s, $delay: 0s, $easing: ease-out) {
animation: slide-up-anim $duration $delay $easing forwards;
}
这种拆分明显增加了一点维护成本，但换来的是关键帧零冗余和明确的复用边界——尤其适合项目中高频共用的基础动效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
