应在 _variables.scss 中定义 $transition-speed: 0.3s; 等变量，统一引用而非硬编码；禁用 transition: all，显式声明 color、opacity、transform 等安全属性，并通过 css 自定义属性桥接 js 动画时长以确保同步。
如何在SCSS中用变量统一管理 transition-duration
直接改所有 transition 声明里的毫秒值？不可维护。正确做法是把时长抽成 SCSS 变量，在一处定义、多处引用。Motion UI 的 $motion-ui-speeds 就是典型范式——你也可以照着它自己建一套。
推荐在 _settings.scss 或 _variables.scss 中定义：
$transition-speed: 0.3s; $transition-speed-fast: 0.15s; $transition-speed-slow: 0.5s;
之后所有过渡声明都用这些变量，比如：
.btn {
transition: background-color $transition-speed ease, border-color $transition-speed ease;
}
- 别用
ms单位写变量（如300ms），SCSS 计算时容易出错；统一用s更稳妥 - 避免在组件级 SCSS 文件里重复定义同名变量，优先从全局变量文件
@import - 如果项目已用 Motion UI，不要另起一套命名，直接扩展
$motion-ui-speeds更省事
为什么不能只靠 transition: all 0.3s 一刀切
all 看似省事，但实际会拖慢渲染、触发意外重排，尤其当元素含 width、height、top、left 这类影响布局的属性时。
- 浏览器必须监听所有可动画属性的变化，开销大
- 某些属性（如
display、z-index）根本不能过渡，写了也无效 - 颜色、opacity、transform 这三类最安全，建议显式列出：
transition: color $transition-speed, opacity $transition-speed, transform $transition-speed - 想偷懒又相对安全？用
transition-property: background-color, color, opacity, transform+ 统一时长变量
如何让 Motion UI 的 $motion-ui-speeds 真正生效
光定义变量没用——Motion UI 的 mixin（比如 mui-fade-in()）默认读取这个 map，但你得确保它被正确引入并参与编译。
- 确认你 import 了 Motion UI 的核心文件顺序：先
@import 'motion-ui/src/settings'，再@import 'motion-ui/src/mixins' - 覆盖默认值要放在 import settings 之后、import mixins 之前，否则会被重置
- 修改后务必重新编译 SCSS，热更新有时会缓存旧的 map 结构
- 检查生成的 CSS 是否真用了你设的值，比如搜索
750ms看是否替换成你自定义的0.4s
过渡时长变量和 JavaScript 动画同步的坑
如果 JS 里也用到同样时长（比如用 setTimeout 模拟过渡结束、或配合 Framer Motion 的 duration），变量不同步会导致视觉错拍或逻辑断裂。
- 纯 CSS 场景下，SCSS 变量无法被 JS 读取，必须手动对齐数值，或通过 CSS 自定义属性桥接：
:root { --transition-speed: 0.3s; } - 若用 CSS-in-JS（如 Emotion），可导出 JS 对象与 SCSS 变量保持一致，但需构建脚本辅助同步，否则极易脱节
- 最易忽略的一点：CSS 的
transition-duration支持小数秒（0.3s），而 JS 的setTimeout最小粒度约 4ms，300ms和301ms实际无差别，但写成0.301s就可能引发调试困惑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
