滑动指示器必须用transform+transition实现，因left/width硬设会因字体加载、缩放、Flex换行导致错位；需基于getBoundingClientRect()动态计算位置与尺寸，并用requestAnimationFrame和resize/fontload兜底更新。
滑动指示器必须用独立元素 + transform + transition 实现，硬设 left/width 会因字体加载、缩放、Flex 换行立刻错位。
为什么不能用 left + width 算位置
标签栏一旦发生字体加载延迟、页面缩放、窗口 resize 或 Flex 自动换行，offsetLeft 和 offsetWidth 就不再等于视觉位置。直接赋值 left 会导致下划线漂移、卡在半路或宽度归零。
常见错误现象：getBoundingClientRect() 返回的 left 值和实际渲染位置差几个像素；切换后下划线没动、只缩宽、甚至跑到屏幕外。
- 必须用
transform: translateX()移动，它基于元素自身坐标系，不受父容器定位影响 - 宽度也用
transform: scaleX()或单独设width（但需配合transform-origin: left） - 所有计算必须基于
getBoundingClientRect()，不是offsetLeft
怎么用 getBoundingClientRect 动态对齐
每次激活新标签时，读取它的边界信息，再更新指示器的位置和尺寸：
function updateTabIndicator(activeTab) {
const rect = activeTab.getBoundingClientRect();
const tabsRect = tabsContainer.getBoundingClientRect();
indicator.style.transform = `translateX(${rect.left - tabsRect.left}px)`;
indicator.style.width = `${rect.width}px`;
}
注意点：
-
tabsContainer必须是position: relative，否则getBoundingClientRect()的left是相对视口的，要减去容器偏移 - 别在
click后立刻调用——DOM 渲染还没完成，得等一帧：requestAnimationFrame(updateTabIndicator) - 如果标签栏用了
scroll-behavior: smooth，滚动后也要触发一次updateTabIndicator
resize / fontload 后怎么兜底重算
浏览器不会主动通知你字体加载完成或窗口缩放结束，所以靠监听事件不全。最稳的兜底方式是：
- 监听
window.addEventListener('resize', () => setTimeout(updateTabIndicator, 0)) - 监听
document.fonts.ready.then(updateTabIndicator)（现代浏览器支持） - 对每个
@font-face加font-display: swap，避免阻塞布局，减少错位窗口期 - 如果用了 Web Font Loader，可在
active回调里调updateTabIndicator
不加兜底的话，用户放大字体或切到高 DPI 屏幕后，下划线大概率偏移且不再恢复。
CSS transition 写在哪、怎么配才不卡
动画必须写在指示器元素自身上，不能靠父容器过渡：
.indicator {
position: absolute;
bottom: 0;
height: 2px;
background: #007bff;
transition: transform 0.3s ease, width 0.3s ease;
}
关键细节：
- 不要加
will-change: transform—— 它可能触发不必要的图层提升，反而增加合成开销 - 避免同时过渡
left和transform，会造成 layout thrashing - 移动端记得加
backface-visibility: hidden防止 iOS Safari 渲染闪烁 - 如果标签栏用了
flex-wrap: wrap，指示器必须设white-space: nowrap防止自身换行
最易被忽略的是：指示器容器没设 overflow: hidden，导致宽屏下指示器超出容器时出现横向滚动条。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
