下划线指示器需用独立元素+transform+transition实现平滑移动，核心是通过getBoundingClientRect()动态读取激活标签位置并用requestAnimationFrame确保重排后更新，配合resize/fontload兜底，封装updateTabIndicator统一处理所有变更场景。
标签页平滑切换不是给 tab 按钮加个 transition 就能动起来的，核心要拆成两件事：下划线指示器移动 + 内容区域切换，且两者必须错开时机、各自满足渲染条件。
下划线指示器怎么用 transform + requestAnimationFrame 平滑移动
动的不是 tab 本身，而是一条独立的 <div class="indicator">。它必须放在标签栏容器内，且容器设 <code>position: relative，自身设 position: absolute; bottom: 0; height: 2px，并声明 transition: transform 0.3s ease, width 0.3s ease。
常见错误是点击后立刻读 offsetLeft 和 offsetWidth，此时浏览器还没重排，值还是旧的。必须包在 requestAnimationFrame 里：
tabButton.addEventListener('click', () => {
requestAnimationFrame(() => {
const rect = tabButton.getBoundingClientRect();
const containerRect = tabsContainer.getBoundingClientRect();
indicator.style.transform = `translateX(${rect.left - containerRect.left}px)`;
indicator.style.width = `${rect.width}px`;
});
});- 别用
left/top做位移——会触发重排，卡顿 - 容器宽度变化（比如响应式缩放）后，需重新触发一次定位逻辑
- 如果 tab 文字长度动态变化，记得监听
resize或用MutationObserver补位
内容区域切换为什么 View Transitions API 最稳
用 innerHTML 或 replaceChildren() 替换内容时，浏览器默认跳过动画。只有 document.startViewTransition() 能让浏览器主动捕获“旧快照 → 新快照”过程。
立即学习“前端免费学习笔记（深入）”；
但这个 API 极其敏感：
- 必须包裹同步操作——不能在里面发请求、等
await，得先拿到完整 DOM 片段再进回调 -
view-transition-name必须严格一致：style="view-transition-name: tab-content"，大小写、空格、引号都不能差 - 旧内容元素不能提前设
display: none或opacity: 0，否则快照拍不到，只剩新内容淡入 - 目标容器（如
<main></main>）必须已挂载到document，不能是刚createElement出来还没appendChild的
纯 CSS transition 方案怎么避免“闪一下”
如果不用 View Transitions，靠手动控制内容区 opacity/transform，关键在强制重排时机：
- 新内容插入前，先设初始态：
opacity: 0; transform: translateY(10px) - 立即读取一个布局属性，比如
container.scrollHeight或container.offsetHeight，逼浏览器拍旧帧 - 再添加动画类，比如
fade-in slide-up - 旧内容不要直接
remove()，等transitionend事件触发后再清理，且要过滤属性：if (e.propertyName === 'opacity')
注意：如果内容高度不固定，max-height 过渡会失真；height: auto 无法参与过渡，别试。
移动端点击延迟和滚动冲突怎么绕开
在 iOS Safari 或部分安卓 WebView 中，click 事件可能延迟 300ms，导致指示器定位滞后。更糟的是，手指滑动标签栏时，scroll 和 click 可能同时触发，造成定位错乱。
- 用
touchstart替代click，并在touchend后加preventDefault()阻止默认行为 - 标签栏容器设
scroll-behavior: smooth，但仅用于横向滚动定位，不影响 tab 切换逻辑 - 监听
scroll时加节流，避免频繁读取getBoundingClientRect()拖慢主线程 - 若标签数量多、文字长，考虑用
IntersectionObserver动态加载可视区域内的 tab 内容，减少首屏压力
最容易被忽略的一点：所有尺寸读取（getBoundingClientRect、offsetWidth 等）都依赖 layout，而 layout 是昂贵操作。哪怕只多读一次，也可能让 60fps 掉到 30fps —— 不是动画写得不够好，是时机没掐准。
