直接修改 left 或 width 会触发重排导致卡顿，应改用 transform 和 opacity 等合成属性；下划线需与容器共用 position: relative 父级，宽度应动态读取 getBoundingClientRect().width 并 Math.round()，所有更新须包裹 requestAnimationFrame。
为什么直接改 left 或 width 会卡顿
因为它们触发重排（layout），浏览器必须重新计算整个 DOM 树的几何信息。尤其在选项卡频繁切换或页面存在缩放、滚动时，left 值会因 offsetParent 变化而错位，width 在 flex 或 inline 元素上还可能被忽略。真正顺滑的做法是只动 transform 和 opacity 这类合成属性——它们走 GPU 合成层，不打断渲染流水线。
- 绝对定位的下划线元素必须和选项卡容器共用同一个
position: relative父级，否则translateX()参照系错乱 - 初始状态建议设
transform: translateX(-100%) scaleX(0)，避免首次加载闪现 - 不要给下划线写死
width，JS 动态读取目标项的getBoundingClientRect().width更可靠
如何用 getBoundingClientRect() 算出正确偏移
不能依赖 offsetLeft：它返回的是相对于 offsetParent 的值，而选项卡容器可能有 padding、transform 缩放，或本身是 flex 子项，导致坐标系漂移。更稳的方式是统一用视口坐标做减法。
- 监听选项卡点击后，立即调用
target.getBoundingClientRect()获取当前项绝对位置 - 同时取
container.getBoundingClientRect().left作为基准，算出相对横坐标：target.left - container.left - 宽度直接用
target.width，但记得Math.round()一下，防止 sub-pixel 渲染抖动 - 所有样式更新必须包在
requestAnimationFrame()里，避免强制同步布局
transition 失效的三个高频原因
写了 transition: transform 0.3s ease 却没动画？大概率掉进了这三个坑里的一个：
- 下划线元素没加
position: absolute，或父容器没设position: relative，导致transform作用域错误 - CSS 中 transition 写在 hover 或 active 态上，而不是默认态——动画必须定义在“静止状态”，否则首次触发无过渡
- JS 更新样式时用了
.style.left或.style.width，绕过了transform，等于白写 transition 规则
移动端触摸与键盘导航怎么补全
CSS :hover 在 iOS Safari 和多数安卓浏览器里根本不会触发，纯靠鼠标悬停的方案在手机上直接失效；键盘用户按 Tab 切换时也看不到下划线跟随。
- 除了
click，必须同时监听touchstart（加preventDefault()防双击缩放）和focus（支持键盘 tab 导航） - 对
touchstart做简单节流，比如用setTimeout延迟 50ms 执行，避免快速滑动时高频重绘 - 用
@media (prefers-reduced-motion: reduce)降级：匹配时直接移除transition，改为即时设置transform
真实项目里最常被忽略的，是 requestAnimationFrame 的调用时机和 getBoundingClientRect() 的坐标基准一致性——差一个像素，下划线就偏半毫米；差一帧，动画就卡顿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
