应使用带参数的.transition(@prop, @time, @ease)混入封装，显式声明过渡属性、时长与缓动函数，避免all宽泛写法；需在:hover等状态选择器中显式调用，不可依赖继承，并优先使用transform/opacity保障性能。
Less里怎么写可复用的transition混入（mixin）
直接给结论：用带参数的.transition()混入，而不是重复写transition: all 0.3s ease这种硬编码。关键在于把属性、时长、缓动、延迟拆成参数，同时支持单属性和多属性写法。
常见错误是只传一个duration，结果:hover里改了color，但transform没进过渡队列——因为transition: color 0.3s默认不包含其他属性。
-
@property设为all或具体属性名（如background-color），避免漏掉目标变化项 -
@duration建议用变量统一管理（如@base-duration: 0.25s），别在每个调用处手写0.3s - 缓动函数优先用
cubic-bezier(0.4, 0, 0.2, 1)（即ease-in-out的现代等效），比ease更可控
如何让:hover / :focus等状态自动继承transition规则
Less本身不识别伪类状态，所以不能靠“自动继承”，必须显式在状态选择器里调用混入。容易忽略的是：父元素设了.transition()，子元素状态却没重写，动画就失效。
正确做法是把混入放在基础样式块里，再在状态块中再次调用——不是为了覆盖，而是确保该状态下也启用过渡。
立即学习“前端免费学习笔记（深入）”；
.btn {
.transition(background-color, 0.2s);
background-color: #007bff;
&:hover {
.transition(background-color, 0.2s); // 必须重写，否则无动画
background-color: #0056b3;
}
}
- 别省略状态块里的
.transition()调用，CSS不会向上继承transition声明 - 如果多个状态共用同一组过渡参数，可提取变量（如
@btn-transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1)），再用transition: @btn-transition - 注意
:focus和:active需单独处理，它们的触发时机和用户交互路径不同
为什么transition-property设为all很危险
transition: all 0.3s看着省事，但实际会让所有可动画属性（包括height、opacity、甚至box-shadow）都参与过渡，导致意外抖动或性能掉帧。
比如一个按钮有box-shadow，hover时只打算动背景色，但all会连带过渡阴影的模糊半径，视觉上像“膨胀”了一下。
- 严格按需指定属性：
.transition(width, 0.2s)、.transition(transform opacity, 0.15s) - 如果真要多属性，用空格分隔，不要用逗号——
transform opacity合法，transform, opacity是语法错误 - 避免对
display、z-index等不可过渡属性设all，浏览器会静默忽略，但增加解析负担
兼容性与性能要注意的硬伤
Less编译后还是普通CSS，所以transition兼容性完全取决于输出的目标CSS，跟Less无关。但混入设计不当会放大问题。
例如在混入里硬编码-webkit-transition前缀，现在Chrome/Firefox/Edge已原生支持，反而增大CSS体积；或者给font-size加过渡——它虽能动，但会触发重排，比transform卡顿得多。
- 现代项目无需手动加
-webkit-前缀，交给Autoprefixer处理更可靠 - 优先用
transform和opacity做动画，它们走合成层，不触发布局计算 - 慎用
max-height过渡模拟展开收起，高度为0时渲染引擎可能跳过过渡，建议改用transform: scaleY(0)
最常被忽略的一点：transition本身不控制“是否播放”，只定义“怎么播”。真正决定动画触发的是属性值是否变化——所以检查你的状态切换有没有真实改变目标CSS属性值，而不是只改class名。
