直接写 transition 在 Less 中易失效，因编译不合并同名属性导致覆盖、all 声明引发重排、缺少 will-change 和 backface-visibility 优化、IE11 缺失 -ms- 前缀。
为什么直接写 transition 在 Less 里容易失效
Less 编译时不会自动合并同名属性，如果你在多个选择器或嵌套规则里重复写 transition，后写的会覆盖前写的——尤其是用 &:hover 覆盖基础状态时，常出现悬停瞬间“卡顿”或“无动画”。Mixin 的价值不是炫技，是确保基态和悬停态的 transition 属性严格对齐、可复用。
用 .transition() Mixin 统一控制过渡行为
别手写 transition: all 0.3s ease; 这类宽泛声明。它会让所有属性都参与动画，包括你没打算动的 height 或 display，反而引发重排（reflow）卡顿。Mixin 应聚焦具体要动的属性：
.transition(@prop: transform, @dur: 0.25s, @easing: cubic-bezier(0.25, 0.46, 0.45, 0.94)) {
transition: ~"@{prop} @{dur} @{easing}";
}
调用时明确指定属性，比如卡片缩放+阴影变化：
.card {
.transition(transform, 0.3s);
transform: scale(1);
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
&:hover {
transform: scale(1.03);
box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
}
悬停效果必须配对声明 transform 和 will-change
只加 transition 不够。浏览器默认不为 transform 开启硬件加速，尤其在低端设备上容易掉帧。在基态加 will-change: transform; 是必要提示，但注意：will-change 不能写在 &:hover 里（触发太晚），也不能滥用（开销大）：
- 仅对真正需要悬停动画的卡片加
will-change: transform; - 避免对列表中全部
.card批量启用，改用 JS 动态添加更稳妥 - 如果卡片含文字，加
backface-visibility: hidden;防止字体模糊
兼容性兜底：IE11 下 transition 必须带前缀
Less 本身不处理 CSS 前缀，transition 在 IE11 需要 -ms-transition。别依赖 Autoprefixer 全包——它对 Less 变量/Mixin 中的值可能漏处理。稳妥做法是在 Mixin 里显式补全：
.transition(@prop: transform, @dur: 0.25s) {
-ms-transition: ~"@{prop} @{dur} cubic-bezier(0.25, 0.46, 0.45, 0.94)";
transition: ~"@{prop} @{dur} cubic-bezier(0.25, 0.46, 0.45, 0.94)";
}
实际项目若已弃用 IE，这步可删；但只要还有 1% 用户跑在 IE11 上，悬停动画就大概率静止不动——这个细节比动画曲线还关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
