Less中transition不支持+合并操作符，必须用逗号分隔多个属性（如transition: opacity 0.2s, transform 0.3s）或拆成独立声明；Mixin封装更安全可靠。
Less 中 + 合并操作符不能用于 transition 声明
直接在 Less 里写 .foo { transition+: opacity 0.2s; transition+: transform 0.3s; } 不会生成两个 transition 声明，而是被编译器忽略或覆盖——Less 的 + 只对某些属性（如 background、box-shadow）有效，transition 不在其支持列表中。你看到的“合并成功”，大概率是浏览器自动合并了多条 transition 声明，而非 Less 编译行为。
真正能合并多个 transition 属性的写法是逗号分隔
浏览器原生支持用逗号拼接多个过渡规则，这是唯一可靠方式。Less 只需按标准语法输出即可：
transition: opacity 0.2s, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);- 不要试图用
+拆成两行，否则第二条会覆盖第一条（Less 编译后仍是单条声明） - 若时长或缓动不同（比如
opacity要0.15s，transform要0.3s），必须拆成两条独立transition声明，靠 CSS 层叠生效
用 Mixin 封装逗号分隔的多属性过渡更安全
手动拼字符串易出错，推荐用参数化 Mixin 控制输出格式：
.transition-multi(@rules...) {
-webkit-transition: @rules;
-moz-transition: @rules;
transition: @rules;
}
调用示例：.transition-multi(opacity 0.15s ease-in, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94));
立即学习“前端免费学习笔记（深入）”；
注意点：
-
@rules...是 Less 3.5+ 的可变参数语法，旧版需用extract()拆解 - Autoprefixer 仍需开启，因为 Mixin 生成的
-webkit-等前缀只是兜底，新版浏览器已不依赖它们 - 别把
all塞进@rules—— 它会让margin、height这类属性也参与过渡，引发重排
为什么有人误以为 + 能合并 transition
常见混淆来源：
- 看到
background+成功合并渐变和颜色，就类推到transition+ - 开发者工具里看到 computed 样式显示多条 transition（其实是浏览器解析逗号后的结果），误判为 Less 合并所致
- 用了错误的 less-loader 版本（如 v5.0 以下），其内部插件对
+的处理逻辑不一致，造成偶现“可用”假象
真实项目里，transition 的可靠性只取决于你是否显式写出可动画属性、是否避免 all、是否把声明放在初始状态——和 + 没关系。
