滑块必须用绝对定位且父容器设相对定位，否则会错位或跳动；需用javascript动态计算left和width，配合transform实现高性能动画，并注意可访问性与跨端兼容性。
滑块元素必须用绝对定位脱离文档流
如果不把滑块设为 position: absolute，它会随内容撑开容器高度，导致布局跳动；同时无法精准对齐到当前激活 tab 的底部。滑块的父容器（通常是 tab 标题栏）需设 position: relative，否则 left 和 width 会相对于 body 计算，完全错位。
常见错误是只加 transition 却忘了定位——结果滑块不动、或飞到页面左上角。务必检查两层：父容器有 relative，滑块本身有 absolute、bottom: 0、height 和初始 left/width。
用 JavaScript 动态计算 left 和 width 更可靠
CSS 自身无法响应 tab 宽度变化（比如响应式缩放、中英文混排、font-size 动态调整），纯 CSS 的 :has() 或 attr() 都不支持数值计算。必须用 JS 获取当前激活 tab 的 offsetLeft 和 offsetWidth，再赋给滑块。
实操建议：
- 监听 tab 按钮的
click事件，避免依赖 focus/keydown 带来的兼容性问题 - 用
getBoundingClientRect()比offsetLeft更稳妥——它能处理 transform、scroll 等偏移 - 设置滑块时优先用
transform: translateX()+width，而非直接改left，前者触发 GPU 加速，动画更顺滑 - 切换前先
getComputedStyle当前滑块位置，用于做平滑过渡起点（尤其首次加载时）
transition 必须作用于 transform 和 width 两个属性
只写 transition: all 0.3s ease 看似省事，但会导致意外动画（比如颜色、opacity 被误触发）。更糟的是，某些浏览器对 left 的 transition 性能较差，易掉帧。
正确写法是明确指定：
.slider {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
这里用了自定义贝塞尔曲线（比 ease 更有弹性感），且两个属性共用同一 timing function，确保位移和缩放同步完成。注意：不要把 height 加进 transition——滑块高度通常固定，加了反而增加渲染负担。
移动端点击区域与 focus 状态容易被忽略
在 iOS Safari 或部分安卓 WebView 中，tab 按钮若没设 cursor: pointer 或 touch-action: manipulation，可能触发 300ms 延迟，滑块看起来“卡一顿”。另外，键盘用户按 Tab 键切换时，仅靠 :focus 样式无法驱动滑块移动——JS 必须监听 focusin 事件并主动更新。
关键补丁：
- 给每个 tab 按钮加
role="tab"和tabindex="0"，保证可访问性 - 用
element.focus({ preventScroll: true })避免滚动干扰滑块定位 - 在 resize 事件里重置滑块位置（防横屏/字体缩放后错位）
- 慎用
will-change: transform——只在滑块元素上加，且仅在动画触发前 set，动画结束即 remove，否则长期开启会吃内存
offsetWidth——记得用 requestAnimationFrame 包一层。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
