下划线滑动应优先使用 transform: translateX()。它触发合成层、避免重排、兼容 Retina 屏与 Safari subpixel 渲染；需配合 position: absolute、getBoundingClientRect() 减去父容器偏移、节流更新及 requestAnimationFrame 确保渲染同步。
下划线滑动依赖 transform 还是 left？
用 transform: translateX() 是更稳妥的选择。它触发合成层，动画不触发重排，滚动或快速切换时不会卡顿；而靠 left + transition 在父容器有 overflow: hidden 或缩放时容易偏移，且 Safari 对 left 的 subpixel 渲染不一致。
常见错误现象：underline 滑动到一半突然跳回起点、在 Retina 屏上模糊、切换 Tab 后位置错位。
- 始终把下划线元素设为
position: absolute，父容器position: relative - 用
getBoundingClientRect()获取目标项位置，而非offsetLeft—— 后者不包含transform偏移 - 初始化时先
transform: translateX(0)，再用requestAnimationFrame设置目标值，避免样式未生效就过渡
如何监听导航项变化并更新下划线位置？
别用 resize 或 scroll 直接驱动，它们太频繁。重点是「什么时候该重算」：路由变化、DOM 插入/移除、字体加载完成（fontload 事件）、或显式调用 updateIndicator()。
使用场景：SPA 路由切换后激活项变了，但下划线还停在旧位置；动态插入新菜单项后宽度没同步。
- Vue/React 中，在
useEffect或watch里响应activeKey变化 - 原生 JS 下，监听
hashchange或popstate，再加个MutationObserver监控导航 DOM 变化 - 务必节流
updateIndicator调用 —— 用setTimeout+clearTimeout防止连打
getBoundingClientRect() 返回的坐标以谁为基准？
以视口（viewport）为基准，不是父容器。直接拿来设 transform 会错位，必须减去父容器的 getBoundingClientRect().left。
典型错误：underline.style.transform = `translateX(${targetRect.left}px)` —— 这会让下划线飞到屏幕左侧，而不是对齐目标文字下方。
- 正确写法：
const parentRect = parentEl.getBoundingClientRect(); const x = targetRect.left - parentRect.left; - 如果父容器有
transform（比如缩放或平移），getBoundingClientRect()已自动包含其影响，无需额外补偿 - 注意：
targetRect.width可直接用，但要防NaN—— 先if (!targetRect.width) return;
移动端点击区域小导致下划线定位不准怎么办？
根本原因是点击触发的是 touchstart，但此时 DOM 尚未渲染完成（尤其是 Vue 的 v-if 或 React 的条件渲染），getBoundingClientRect() 拿到的是旧尺寸。
性能影响：在 touchend 或 click 里直接算，可能因渲染延迟导致闪动；放在 requestAnimationFrame 第二帧又太慢。
- 优先用
click事件（iOS Safari 对click的延迟已优化），并在回调里立刻requestAnimationFrame(() => updateIndicator()) - 给导航项加
min-width和padding，避免触控热区过小 - 如果必须支持
touchstart，加个setTimeout(updateIndicator, 16)确保样式已应用
容易被忽略的一点：当导航项使用 flex 布局且内容动态撑开时，getBoundingClientRect() 必须在 reflow 后取 —— 浏览器不会自动等 flex 计算完再返回 rect，得手动 offsetHeight 强制触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
