必须用transform: translateX()而非left，因left触发重排导致滑块跳动错位，而translateX仅触发合成、定位精准；需配合flex布局、动态宽度、will-change优化及JS缓存offset值。
滑块位置计算必须用 transform: translateX() 而不是 left
用 left + transition 看似可行，但实际会触发重排（layout），尤其在 Tab 文字长度不一、字体加载中或缩放页面时，滑块会跳动或错位。而 transform: translateX() 只触发合成（composite），性能稳定，且能精准对齐文字中心或下划线起始点。
关键点：
- 滑块容器需设为
position: absolute，父级position: relative - 滑块宽度应动态匹配当前激活 Tab 的
offsetWidth（JS 控制）或用 CSSwidth: fit-content（仅现代浏览器） - 初始
translateX值必须基于第一个 Tab 的offsetLeft计算，不能写死像素值
Tab 元素必须用 display: inline-flex 或 display: flex 布局
如果用 display: inline-block 或纯 span，Tab 之间默认有空格间隙，导致 offsetLeft 不准，滑块定位偏移。Flex 布局可彻底消除间隙，且方便对齐和响应式伸缩。
推荐结构与样式：
立即学习“前端免费学习笔记（深入）”；
<div class="tabs"> <button class="tab" data-tab="1">首页</button> <button class="tab" data-tab="2">产品</button> <button class="tab" data-tab="3">关于</button> <div class="slider"></div> </div>
CSS 中：.tabs { display: flex; position: relative; }，.tab { flex: 1; }（均分宽度）或 flex: none;（内容自适应）
滑块平滑过渡要加 will-change: transform 防卡顿
在高频切换（如快速点击多个 Tab）时，部分浏览器（尤其是 Safari 和旧版 Chrome）可能因未提前告知渲染层而出现首帧延迟。加 will-change: transform 可提示浏览器提前升层，让 translateX 动画更顺滑。
注意：
- 只加在滑块元素上，不要滥用到所有动画元素
- 配合
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1)（略带弹性，比ease更自然） - 若 Tab 数量多且文字长度差异大，建议 JS 中缓存每个 Tab 的
offsetLeft和offsetWidth，避免反复读取触发重排
移动端点击区域和视觉反馈容易被忽略
纯 CSS 实现时，滑块本身没有交互能力，所以 Tab 必须可点击。但小屏设备上，button 默认 padding 小，点击易误触。务必加 min-height: 44px（iOS 安全点击区）和 padding，并用 :active 给视觉反馈。
另外：滑块底部距离 Tab 底边建议用 bottom: -2px（非 0），否则在某些字体渲染下会轻微“悬空”；若 Tab 使用 text-transform: uppercase，需注意 offsetHeight 不变，但视觉高度压缩，此时滑块高度应固定（如 height: 3px），不依赖文字行高。
真正难的不是动效本身，是让滑块在各种字体、缩放、RTL、动态加载文本的场景下都稳住位置——这得靠 JS 监听 resize 和 fontload（或用 document.fonts.ready）后重算，纯 CSS 做不到这点。
