transition 对 left + width 失效是因为二者默认不触发重绘或合成层提升，且 left 需父元素设 position: relative 才生效、width 在 inline 元素上无效；应改用 transform: translateX() 和 scaleX() 实现高性能平滑动画。
transition 为什么对 left + width 失效？
直接给 left 和 width 加 transition 很可能没动画——因为这两个属性默认不触发重绘（repaint）或合成层提升，浏览器会跳过过渡。更关键的是：如果父容器没设 position: relative，子元素的 left 根本不生效；而 width 在 inline 元素上压根无效。
- 确保下划线元素是
absolute定位，且其父级（如导航项）有position: relative - 只对能触发硬件加速或 layout 的属性做 transition，
transform比left更稳 - 避免在
display: inline元素上设width，改用inline-block或flex
用 transform 替代 left 实现平滑移动
transform: translateX() 触发合成层，性能好、无闪动，且 transition 支持度高。配合 scaleX() 控制长度，比同时调 left 和 width 更可靠。
- 把下划线做成固定高度的
div，初始transform: translateX(-100%) scaleX(0) - 鼠标移入时，用 JS 计算目标位置：
offsetLeft+ 半宽偏移，再设transform: translateX(x) scaleX(1) - CSS 中写死
transition: transform 0.3s ease，别加left或width
nav .underline {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
width: 100%;
background: #007bff;
transform: translateX(-100%) scaleX(0);
transition: transform 0.3s ease;
}
JS 如何精准计算目标 left 和 width？
不能直接读 offsetLeft 当作 left 值——它相对于 offsetParent，而你的下划线可能挂在 nav 容器里，坐标系不一致。更稳的方式是用 getBoundingClientRect() 拿绝对位置，再减去 nav 的 left。
- 监听
nav内链接的mouseenter，取当前target.getBoundingClientRect() - 用
nav.getBoundingClientRect().left做基准，算出相对偏移：target.left - nav.left -
width直接用target.width，但记得加Math.round()防止 sub-pixel 渲染抖动
移动端 click 延迟与 hover 失效怎么办？
纯 :hover 在 iOS 和 Android 上基本不可靠，尤其 Safari 对非可点击元素（如 div）的 hover 不响应。必须用 JS 绑定 touchstart + click 双事件，且要防重复触发。
- 给导航项加
role="button"并设tabindex="0"，让 iOS Safari 认它是可交互元素 - 用
addEventListener('touchstart', handler, { passive: false })防止滚动冲突 - 避免在
click和touchstart里都执行动画逻辑，统一走一个 updateUnderline() 函数
下划线动效看着简单，真正卡住人的往往是坐标系错位、移动端事件绑定遗漏、或者误以为 left 能像 transform 一样丝滑——这些点不提前踩一遍，调试起来就只剩 console.log 狂轰滥炸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
