纯css无法实现动态光标跟随，必须用js获取鼠标坐标并写入css变量（如--mouse-x、--mouse-y），再通过伪元素结合calc()定位；transition+left仅能模拟弹性视觉效果，无法实现运行时持续插值的真正弹性动效。
能实现，但必须用 JS 读取位置再写入 CSS 变量，纯 CSS 无法动态响应元素 offset 变化。
为什么不能只靠 transition + left 实现弹性跟随
常见误解是给 .underline 加 transition: left 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) 就够了——这只能让移动“看起来有弹性”，但起点和终点仍由 JS 计算后硬设 style.left。真正的弹性（比如拖拽回弹、过冲衰减）需要运行时持续插值，CSS 本身不提供物理引擎。所谓“弹性动效”，本质是用贝塞尔曲线模拟，而 cubic-bezier(0.68, -0.55, 0.265, 1.55) 这组值就是专为模仿橡皮筋回弹设计的。
如何用 CSS 变量配合 JS 实现可维护的跟随逻辑
把位置计算从内联样式移到 CSS 变量，避免直接操作 style.left 导致难以覆盖或调试：
- 在 :root 或导航容器上定义
--underline-left: 0px和--underline-width: 100px - JS 中不再写
el.style.left = ...，而是el.style.setProperty('--underline-left', `${offset}px`) - CSS 中用
left: var(--underline-left)和width: var(--underline-width)绑定 - 这样后续想用媒体查询调整移动端宽度，或通过 JS 批量重设所有变量，都更可控
容易忽略的 DOM 更新时机问题
Vue/React 场景下，active 类切换后立即读 offsetLeft 常返回旧值，因为 DOM 渲染未完成：
- Vue 用户必须用
nextTick包裹读取逻辑，例如：await nextTick(); const el = document.querySelector('.nav-item.active'); - React 用户推荐用
useLayoutEffect，它在浏览器绘制前同步执行，比useEffect更可靠 - 原生 JS 若用
classList.toggle切换 class，需搭配getBoundingClientRect()而非offsetLeft，因后者不触发重排，可能缓存旧值 - 别在事件回调里连写两遍
el.offsetLeft试图“强制刷新”——无效，必须等渲染帧完成
移动端 Safari 的 sticky + transition 组合陷阱
当导航栏同时启用 position: sticky 和下划线 transition，iOS 15.4 之前版本会出现动画卡顿或跳变：
- 根本原因是 sticky 元素在滚动中会频繁触发合成层切换，而
transition依赖图层稳定性 - 临时解法：给
.underline加will-change: transform，但仅在真正要动时加，动完立刻移除，避免持续占用 GPU 内存 - 更稳方案：改用
transform: translateX()替代left，并确保父容器没设overflow: hidden——后者会裁剪 transform 动画的过冲部分 - 若导航栏本身也用了
transform（比如缩放适配），.underline必须同级或更高层级，否则会被嵌套 transform 干扰坐标系
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
