应统一在_animations.scss中定义带项目前缀的@keyframes（如my-fade-in），并配套封装参数化@mixin（如fade-in($duration, $easing, $fill)），通过@use导入实现模块化调用，避免全局污染与命名冲突，同时约束仅使用transform和opacity等gpu友好属性确保性能。
直接用 @keyframes 写在每个组件里，等于把动画逻辑钉死在局部，改一个缓动函数就得全局搜、逐个修。真正可维护的动画库，必须把关键帧定义和调用逻辑分层，靠 @mixin 封装参数接口，而不是靠复制粘贴。
怎么写一个带参数的 @keyframes @mixin
不能在 @include 里动态生成 @keyframes 名——Sass 不支持作用域隔离的关键帧名，拼字符串容易冲突。正确做法是：每个动画对应一个固定名的 @keyframes，再用 @mixin 控制它的使用方式。
- 在
_animations.scss里定义@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }，名字带项目前缀（如my-fade-in） - 配套写
@mixin fade-in($duration: 0.3s, $easing: ease-out, $fill: forwards) { animation: my-fade-in $duration $easing $fill; } - 调用时只需
@include fade-in(0.4s, cubic-bezier(0.2, 0.8, 0.4, 1));，不碰关键帧本身
为什么不能把整条 animation 值当参数传
写 @mixin anim($value) { animation: $value; } 看似省事，实际断掉了对关键帧内容的控制权。一旦要微调某个动画的起始缩放值，就得重写一遍 @keyframes，复用性归零。
- 关键帧逻辑（比如
transform: scale(0.95)→scale(1)）必须和参数绑定，不是“套壳” - 高频动画（如入场、滑入）应共用一套关键帧定义，只通过 mixin 参数调节行为
- 若真需多变关键帧，拆成两个 mixin：
@mixin anim-keyframes($name, $from, $to)+@mixin anim-use($name, ...)，但日常够用的场景没必要
@use 导入动画模块时的三个硬约束
@import 是污染式加载，@use 才是模块化前提。但光换语法不够，还得满足三条规则，否则编译会静默失败或覆盖冲突。
-
_animations.scss必须显式@forward 'core'或@export，否则外部@use后无法访问内部@mixin - 所有
@keyframes名强制加项目前缀（如my-bounce），因为编译后它仍是 CSS 全局作用域，Sass 模块化管不住 - 入口文件（如
index.scss）里用@use 'animations' with ($prefix: 'my-')，把前缀变量透传进去，方便未来批量切换
最容易被忽略的是关键帧命名策略——哪怕你用了 @use、写了参数化 @mixin，只要 @keyframes bounce 这种通用名还存在，CI 流程里 grep 出来就是隐患。性能优化也得从这里起步：别让 Sass 生成含 left、top 的关键帧，GPU 友好的只有 transform 和 opacity。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
