应将 transition-duration 值统一定义在 Less 变量 @duration-base 中，并通过 .transition() Mixin 参数化调用，避免硬编码；Mixin 内明确指定属性、支持默认值与覆盖、自动添加硬件加速（如 translateZ(0)），禁用 transition: all 以保性能与语义。
transition-duration 值该写在哪儿才不重复？
直接写在每个 transition 里，后期改 0.3s → 0.25s 就得全局搜替换，漏一个就视觉不一致。Less 的 @duration 变量 + .transition() Mixin 是唯一靠谱做法。
常见错误是把时间硬编码进选择器：.btn { transition: all 0.3s ease; } —— 这等于放弃维护性。
- 统一用
@duration-base: 0.3s;定义基准值，所有动画都基于它微调 - Mixin 内部用
transition: @arguments;接收属性列表，避免写死all - 别用
transition: @duration-base;单独写，CSS 不认这种简写，必须带属性和 timing-function
如何让不同组件用不同持续时间又不破坏统一？
硬塞多个变量（@duration-btn、@duration-modal）看似灵活，实则让设计系统失控。正确做法是保留一个基准，靠 Mixin 参数覆盖。
比如下拉菜单展开要慢一点，不是新增变量，而是调用时传参：.transition(transform, @duration-base * 1.5);
- Mixin 定义：
.transition(@prop, @dur: @duration-base, @easing: ease) { transition: @prop @dur @easing; } - 按钮悬停仍用默认：
.transition(background-color); - 模态框入场加长：
.transition(opacity, @duration-base * 2); - 注意：乘法只对数字单位有效，
@duration-base * 2得是0.3s * 2，不能是"0.3s" * 2
为什么用 transition-property 而不是 all？
transition: all 0.3s; 看似省事，但会意外触发重排（比如 box-shadow 变化引发布局抖动），性能差还难调试。
真实场景中，90% 的过渡只涉及几个属性：颜色、透明度、位移、缩放。明确列出它们，既是性能优化，也是语义表达。
- 推荐组合：
.transition(color, background-color, opacity, transform); - 慎用
border：改border-width会触发布局计算，优先用outline或box-shadow - 如果真要动态控制多个属性，用
.transition(~"color, background-color, #{'opacity'}, #{'transform'}");避免 Less 编译报错
移动端 Safari 对 transition 的兼容陷阱
iOS 15 之前，transform + transition 在 fixed 元素上常卡顿，不是代码写得不对，是渲染管线没开硬件加速。
单纯加 will-change: transform; 治标不治本，还可能引发内存泄漏。真正有效的解法藏在 Mixin 里。
- 在 Mixin 中自动补
transform: translateZ(0);（或translate3d(0,0,0)）强制 GPU 加速 - 但仅对含
transform的过渡生效，避免无谓提升其他元素 - 示例：
.transition(transform) { transform: translateZ(0); transition: transform @duration-base ease; } - 注意：iOS 16+ 已大幅改善，但老版本存量设备仍多，别跳过这步
实际项目里最常被忽略的，是 transition 和 animation 的职责混淆——过渡管状态变化，动画管关键帧序列。混着用，时间值就再也理不清了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
