transition: all 危险在于全量监听可动画属性，会意外触发 width、height 等重排及 box-shadow、filter 等高开销重绘，导致卡顿掉帧；应显式限定为 transition-transform opacity 等 GPU 加速属性。
为什么直接写 transition: all 是最危险的默认值
它会让所有变化的属性都动起来，比如你只改了 opacity，但 border-color、font-size 甚至 box-shadow 都跟着渐变，轻则视觉闪烁，重则触发 Layout（重排），卡顿明显。尤其在导航栏、弹层这类高频交互区域，all 基本等于埋雷。
真正安全的做法是显式声明要过渡的属性：transition: transform 0.25s, opacity 0.3s ease-out。多个属性用英文逗号分隔，各自指定时长和缓动函数，互不干扰。
- 只对
transform和opacity过渡，GPU 加速生效，性能最优 - 避免对
width、height、top/left等触发 Layout 的属性做过渡 - 如果必须过渡尺寸类属性，优先用
transform: scale()替代width/height
Less 混合器怎么封装才不被项目后期反噬
手写 transition 最大的维护痛点是：改一个动画时长，得全局搜索替换十几处；加个新缓动曲线，又得逐个补前缀。用 Less 混合器封装后，改 .transition() 一处，全项目同步生效。
关键不是“有没有封装”，而是封装时是否规避了常见陷阱：
立即学习“前端免费学习笔记（深入）”；
- 别把参数默认值设成
@prop: all—— 默认就埋坑，新人一用就中招 - 厂商前缀必须自动注入：
-webkit-transition在 Android 4.4 WebView 和旧 Safari 里仍不可省 - IE10+ 原生支持，
-ms-前缀可省；但-webkit-必须保留，否则 iOS 12 以下直接失效 - 混合器内部不要硬编码
cubic-bezier(0.25, 0.46, 0.45, 0.94)，应允许调用时传入，否则复用性归零
一个稳妥的封装示例：
.vendor(@property, @value) {
-webkit-@{property}: @value;
-moz-@{property}: @value;
@{property}: @value;
}
.transition(@prop: transform, @time: 0.25s, @ease: ease) {
.vendor(transition, @prop @time @ease);
}
Vue 中 <transition></transition> 怎么对接 CSS transition 工具类
Vue 的 <transition></transition> 组件本身不执行动画，它只是按生命周期自动切换类名（如 v-enter-active、v-leave-to）。真正起作用的是你写的 CSS 类，所以工具类必须能精准命中这些类名。
常见错误是把工具类直接写在组件根元素上，结果 v-enter-active 阶段没生效 —— 因为 Vue 插入元素时，先加 v-enter，再下一帧加 v-enter-active，工具类得挂在这俩类上才对。
- 正确写法：
.fade-enter-active, .fade-leave-active { .transition(opacity, 0.3s, ease-out); } - 别漏掉
leave-active—— 否则关闭动画直接消失 - 如果用
transform实现滑入，记得同时配opacity，否则初始状态会“闪一下” -
v-enter和v-leave-to类里只写终态样式（如opacity: 0），不要写transition
多属性不同节奏时，千万别塞进一个混合器
当你要实现「宽度收缩快、透明度淡出慢」这种组合效果时，强行用一个 .transition(width 0.2s, opacity 0.4s) 混合器，反而增加理解成本，且无法灵活控制延迟或缓动差异。
更务实的做法是拆开写：
.slide-fade-enter-active {
.transition(transform, 0.25s, cubic-bezier(0.12, 0.87, 0.5, 1));
.transition(opacity, 0.4s, ease-out);
}
浏览器会合并这两条声明，各走各的节奏。Less 编译后就是标准的逗号分隔语法，完全合法，也便于后期单独调整某一项。
真正容易被忽略的点是：transition-delay 必须跟对应属性绑定，比如 opacity 0.4s ease-out 0.1s，而不是全局 delay —— 否则宽度和透明度会错拍。
