Less变量需带单位（如@indicator-offset: 24px）以确保transform和width值合法，配合CSS transition实现可配置底部动画；多Tab自动定位推荐CSS变量+calc动态计算，避免left与transform混用导致跳变。
如何用Less变量控制Tab底部动画的位移和宽度
直接说结论：Less本身不执行动画，但能用变量统一管理transform位移值和width，配合CSS transition实现可配置的底部跟随动画。关键在变量定义位置、单位一致性、以及如何把变量注入到动态计算中。
为什么@indicator-offset和@indicator-width必须带单位
Less变量不是CSS自定义属性，它在编译期就展开为纯CSS。如果写成@indicator-offset: 20（无单位），后续用在translateX(@indicator-offset)里会报错——translateX(20)非法，必须是translateX(20px)或translateX(20%)。
-
@indicator-offset: 24px→ 用于绝对定位left或transform位移 -
@indicator-width: 64px→ 用于width，也可设为100%适配不同Tab项 - 若需百分比位移（如居中对齐），改用
@indicator-offset: 50%，但要确保父容器有明确宽度
如何让每个Tab项激活时自动计算left和width
不能靠JS算偏移？可以，但Less里更推荐用“伪类+相邻兄弟选择器+变量组合”静态生成。核心思路：用:nth-child(n)匹配第n个Tab，结合@tab-width和@tab-gap推算left值。
示例片段：
.tabs {
--tab-width: 80px;
--tab-gap: 16px;
}
<p>.tab:nth-child(1) .indicator { left: calc((var(--tab-width) + var(--tab-gap)) <em> 0); width: var(--tab-width); }
.tab:nth-child(2) .indicator { left: calc((var(--tab-width) + var(--tab-gap)) </em> 1); width: var(--tab-width); }
.tab:nth-child(3) .indicator { left: calc((var(--tab-width) + var(--tab-gap)) * 2); width: var(--tab-width); }
</p>
注意：这里用CSS变量而非Less变量，是因为需要运行时响应Tab数量变化；Less变量适合固定结构，比如只有3个Tab且不增减。
动画卡顿或跳变的三个常见原因
即使变量设置正确，动画仍可能异常。排查点集中在渲染层：
- 没加
will-change: transform→ 尤其在移动端，translateX动画易掉帧 -
left和transform混用 → 同一元素同时设left: 24px和transform: translateX(24px)会导致叠加计算，位移翻倍 - 宽度从
auto变为具体值 →width动画必须两端都是数值（如width: 0px → 64px），不能auto → 64px
最稳的组合是：只用transform: translateX()控位移，width单独过渡，且两者都用像素值——变量就是帮你锁死这些数值的源头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
