应使用.transition(@prop: transform, @time: 0.3s, @ease: ease)封装，显式声明过渡属性、自动注入厂商前缀、避免all宽泛写法，并配合transform而非height实现高性能导航栏动画。
Less混合器怎么封装transition逻辑才不踩坑
直接用transition写死在选择器里，后期改动画时得全局搜、逐个改；用Less混合器封装后，改一个地方就能同步所有导航栏过渡行为。但常见错误是把transition-property写成all，导致意外触发文字颜色、边框等非预期属性的动画，卡顿或闪烁。
推荐做法是显式声明要过渡的属性，比如只动transform和opacity：
.transition(transform, 0.3s, cubic-bezier(0.25, 0.46, 0.45, 0.94))- 避免
.transition(all, 0.3s)这种宽泛写法 - 如果多个属性需不同持续时间（如
width0.3s +opacity0.2s），就拆成两个transition声明，不要强行塞进一个混合器
为什么用.vendor()封装比手写前缀更可靠
原生transition在旧版 Safari 和 Android Webview 中仍需-webkit-transition，手动补全易漏、难维护。用Less函数自动注入前缀，能覆盖绝大多数兼容场景。
一个轻量但够用的封装示例：
立即学习“前端免费学习笔记（深入）”；
.vendor(@property, @value) {
-webkit-@{property}: @value;
-moz-@{property}: @value;
@{property}: @value;
}
.transition(@prop: transform, @time: 0.3s, @ease: ease) {
.vendor(transition, @prop @time @ease);
}
调用时：.transition(transform, 0.25s, cubic-bezier(0.12, 0.87, 0.5, 1))，生成的CSS会自动带齐各厂商前缀。
注意：IE10+已原生支持transition，若项目不需支持IE，可省略-ms-前缀；但Android 4.4以下WebView仍依赖-webkit-，别删。
导航栏开合动画中transform和height该选哪个
用height: 0 → height: auto做下拉菜单？别这么做——height: auto无法被CSS过渡识别，浏览器会跳变。必须用transform: scaleY(0) → transform: scaleY(1)，或者更稳妥的transform: translateY(-100%) → transform: translateY(0)。
原因很实在：
-
transform是GPU加速属性，动画帧率稳 -
height触发布局重排（reflow），尤其内容多时明显卡顿 -
scaleY在某些低端Android设备上可能有缩放模糊，translateY更安全
对应Less写法：.transition(transform, 0.25s, ease-out)，配合类切换控制transform值即可。
如何让动画响应更快又不牺牲可维护性
过渡时间不是越短越好。0.1s人眼几乎感知不到动画，0.4s以上又显得拖沓。导航栏开合建议统一用0.25s ~ 0.3s，既清晰又有反馈感。
真正容易被忽略的是性能临界点：
- 加
will-change: transform前，先用Chrome DevTools的Rendering面板确认是否掉帧；没掉帧就别加，它会强制创建新图层，内存占用翻倍 - 移动端慎用
cubic-bezier(0.12, 1.36, 0.65, -0.28)这类超调曲线——部分Android 6~8系统解析异常，表现为动画突停或回弹失效 - 如果导航栏含大量子菜单项，动画期间禁用指针事件：
pointer-events: none加在动画容器上，避免用户快速连点触发多次状态切换
