真正顺滑的下划线移动应使用 transform: translatex() 配合 transition: transform，避免 left/width 触发重排；需绝对定位下划线元素、动态读取 targetrect 和 containerrect 坐标、在 requestanimationframe 中更新样式，并注意初始 transform 设置、层叠上下文干扰及移动端适配。
用 transform: translateX() 配合 transition 实现下划线平滑移动
直接改 left 或 width 的 transition 容易卡顿，因为它们会触发重排（layout）。真正顺滑的做法是只动 transform 和 opacity 这类合成属性。
核心思路：用一个绝对定位的 <span class="underline"></span> 覆盖在当前激活项下方，通过 transform: translateX() 控制它的水平位置，再用 transition: transform 0.3s ease 做缓动。
- 下划线元素必须和导航项同级或包裹在同一个相对定位容器里，否则
translateX()参照系错乱 - 初始
transform: translateX(-100%)是为了隐藏它，避免首次加载时闪一下 - 不要给下划线设固定
width，而是靠 JS 动态读取当前项的offsetWidth和offsetLeft
JS 动态同步下划线位置的关键三步
纯 CSS 无法响应点击切换，必须用 JS 监听导航项点击，并实时更新下划线的 transform 和 width。难点不在逻辑，而在 DOM 读取时机和坐标计算是否准确。
- 用
getBoundingClientRect()比offsetLeft更可靠，尤其当导航栏有缩放、滚动或 flex 布局时 - 下划线的
left值应设为targetRect.left - containerRect.left，而不是直接用target.offsetLeft - 务必在
requestAnimationFrame里更新样式，避免强制同步布局（forced reflow）
示例关键片段：
const underline = document.querySelector('.underline');
const navItems = document.querySelectorAll('.nav-item');
const container = document.querySelector('.nav-container');
<p>navItems.forEach(item => {
item.addEventListener('click', () => {
const rect = item.getBoundingClientRect();
const containerRect = container.getBoundingClientRect();
requestAnimationFrame(() => {
underline.style.width = <code>${rect.width}px</code>;
underline.style.transform = <code>translateX(${rect.left - containerRect.left}px)</code>;
});
});
});</p>
transition 失效的三个高频原因
写了 transition: transform 0.3s 却没动画？大概率掉进了这三个坑里的一个。
- 没给下划线元素设置初始
transform值（比如transform: translateX(0)），导致浏览器无法插值 - 在同一个 tick 里先改
width再改transform，触发了 layout → paint → composite 的完整流程，动画被跳过 - CSS 中用了
!important覆盖了 transition，或者父元素有will-change: auto干扰了合成层判断
移动端点击后下划线偏移或抖动
在 iOS Safari 或部分安卓 WebView 里，点击后下划线突然跳到错误位置，通常不是 JS 错，而是视口缩放或点击高亮干扰了 getBoundingClientRect() 返回值。
- 确保
<meta name="viewport">设置了user-scalable=no或至少禁用双击缩放 - 给导航项加
-webkit-tap-highlight-color: transparent，避免点击蒙层影响布局测量 - 如果用了
rem或vW布局，注意getBoundingClientRect()返回的是物理像素，需结合window.devicePixelRatio校准（但多数情况不需要）
真正难调的，是那个看似无关的 container 元素有没有意外的 transform、perspective 或 filter —— 它们会创建新的层叠上下文，让子元素的 position: absolute 行为彻底变样。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
