left: var(--offset) 不会触发过渡，因CSS变量非可动画值；必须用 calc(var(--offset)) 包裹并配合 transition 才能实现平滑位移。
直接用 var(--offset) 给 left 赋值不会触发平滑位移——浏览器不把 CSS 变量当可动画值，更不会自动计算布局偏移。必须靠 calc() 搭配定位属性，再结合 transition 才能动起来。
为什么 left: var(--offset) 不会过渡
CSS 变量本身不是“值”，而是“占位符”；left 属性只在解析为具体像素/百分比后才参与动画。如果写 left: var(--offset); 且 --offset 是 24px，多数浏览器仍会视作无效声明（降级为 auto），导致 transition 根本不启动。
常见错误现象：
-
.btn-group .underline { left: var(--active-left); transition: left 0.3s; }—— 动画静止不动 - JS 改了
--active-left，但下划线没移动，getComputedStyle显示left: auto
根本原因：变量未被解析为数值前，left 就没进入动画流水线。
正确写法：用 calc(var(--offset)) 触发可动画值
必须显式包裹 calc()，哪怕只是单个变量：
.underline {
position: absolute;
left: calc(var(--active-left));
transition: left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
这样浏览器才会把 calc(var(--active-left)) 当作一个可插值的长度值，进而启用过渡。
使用场景与要点：
- 变量值必须带单位（如
--active-left: 48px或--active-left: 20%），calc()不接受无单位数字 - 若需动态加减（比如居中对齐），写成
calc(var(--active-left) + var(--offset-gap))，但两个变量都得带单位 - 避免混用单位：
calc(var(--px-val) + 5vw)在部分旧版 Safari 会失败，优先统一用px或rem
JS 更新变量时，如何保证位移精准不跳变
不能只改变量，还得确保每次更新都触发重排+重绘流程，否则浏览器可能复用旧布局值。
关键操作：
- 先读取目标元素的
offsetLeft和offsetWidth（强制同步布局） - 再用
document.documentElement.style.setProperty('--active-left', `${newLeft}px`) - 如果按钮组是动态渲染的（如 Vue/React），务必在 DOM 更新完成后再读位置——Vue 用
$nextTick，React 用useLayoutEffect
典型翻车点：JS 改完变量立刻调用 getBoundingClientRect()，结果拿到的是旧位置；或者没等组件挂载完就读 offsetLeft，返回 0。
移动端适配和键盘遮挡下的 left 偏移维护
固定定位按钮组在 iOS 键盘弹出时，vh 会突变，left 值若依赖视口单位就容易错位。
稳妥做法：
- 用
px或rem作为变量主单位，避免直接用vw/vh算left - 键盘检测用
visualViewport（iOS 16.4+）或监听window.innerHeight变化，动态调整--active-left的值 - 慎用
transform: translateX()替代left—— 虽然性能好，但下划线要精准贴合文字底部时，translateY很难对齐 baseline，left+top更可控
真正难的不是让下划线动起来，而是每次菜单切换、字体加载、窗口缩放后，它都稳稳停在激活项正下方——这要求变量更新、布局读取、CSS 解析三者严格时序对齐，漏掉一环就跳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
