不能靠一个变量统一管理过渡时间曲线，因为缓动函数必须与属性、时长严格绑定使用；--easing-standard单独定义无效，它只是占位符，未被写入transition声明即不生效，且不同交互意图需语义化曲线（如--easing-interactive用于按钮悬停、--easing-entrance用于模态框入场）。
不能靠一个变量统一管理过渡时间曲线——缓动函数必须和时长、属性绑定使用，且不同交互意图需要不同曲线语义。
为什么--easing-standard单独定义没用
CSS 变量本身不触发任何动画，--easing-standard只是个占位符。浏览器只认最终解析出的 transition 声明里显式写出的 cubic-bezier() 或 ease。只在 :root 里写一句 --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);，却不把它塞进某个元素的 transition 规则中，它就等于不存在。
- 常见错误：改了变量值，但没检查对应组件的
transition是否已引用该变量 - 更隐蔽的问题：多个组件共用同一个变量名，但实际需要不同曲线（比如按钮悬停要更“弹”，模态框退场要更“沉”）
- SCSS 中用
$easing变量也一样——编译后就是静态字符串，无法响应:hover或 JS 状态切换
transition 声明里怎么正确引用变量
必须把 var(--easing-xxx) 和对应属性、时长严格对齐，且每一对三元组（property / duration / timing-function）数量必须一致。
- ✅ 正确：
transition: background-color var(--transition-fast) var(--easing-interactive), transform var(--transition-fast) var(--easing-interactive); - ❌ 错误：
transition: background-color var(--transition-fast), transform var(--easing-interactive);（少一个var(--transition-fast)，浏览器会静默截断第二项） - ⚠️ 注意：逗号分隔的各段之间不能错位，顺序乱一位（比如把
transform的时长写在opacity的缓动位置），整条声明直接失效
如何按交互意图区分缓动语义
别抽象成“标准缓动”，而要用语义化名称映射真实行为：悬停反馈要快起快收，入场要柔和加速，退场要减速收尾。
- 定义示例：
--easing-interactive: cubic-bezier(0.2, 0.8, 0.4, 1);（用于按钮缩放、图标 hover） -
--easing-entrance: cubic-bezier(0.3, 0, 0.4, 1);（用于模态框、抽屉展开） -
--easing-exit: cubic-bezier(0, 0.3, 0.5, 1);（用于遮罩淡出、列表项移除） - 禁用
ease和ease-in-out这类模糊关键字——它们在不同浏览器渲染差异大，且团队无法一眼判断节奏意图
SCSS mixin 怎么安全封装缓动+时长组合
单独封装缓动函数意义不大；真正可复用的是「属性 + 时长 + 曲线」三者绑定的节奏单元。
- 推荐写法：
@mixin transition-opacity($duration: 0.3s, $easing: var(--easing-entrance)) { transition: opacity $duration $easing; } - 调用时必须显式传参：
@include transition-opacity(0.45s, var(--easing-exit));，避免隐式依赖全局默认 - 如果需给不同属性配不同曲线（如
transform弹一点、opacity柔一点），不要强行塞进一个 mixin，拆成两个或手动展开更清晰 - 禁止写
transition: all $duration $easing;——它会意外触发动画box-shadow或border-color，引发重绘
最容易被忽略的一点：缓动函数不是“装饰”，它是交互节奏的一部分。同一套 var(--easing-entrance) 用在 0.18s 的按钮上和 0.45s 的模态框上，给人的感知完全不同——所以变量名必须带语义，且必须和时长变量成对出现、同步维护。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
