visibility + transform 是唯一能稳定触发平滑滑动的组合，因 display: none 使元素退出渲染流程导致 transition 失效，而 visibility: hidden 保留占位并支持过渡；需配合 position: absolute、transform 全写法（如 translatex(-100%)）、指示条用 transform 控制，且动画属性限于 transform 和 opacity 以保性能。
visibility + transform 是唯一能稳定触发平滑滑动的组合，靠 display 或 opacity 都会丢掉过渡帧或跳变。
为什么不能用 display: none 做 transition
display: none 会让元素彻底退出渲染流程，浏览器不计算尺寸、不参与布局、不触发重绘——transition 对它完全无效。你写 transition: display 0.3s，结果就是切过去瞬间闪现，毫无动画。
必须用 visibility: hidden：它保留 DOM 占位、维持盒模型尺寸、支持 CSS 过渡，是唯一能和 transform 搭配出“真滑动”的隐藏方式。
- 所有 tab 面板初始状态必须设
visibility: hidden，不能等 JS 加 class 才生效 - 激活面板要同时覆盖
visibility: visible和transform: translateX(0) -
transition必须显式包含visibility，例如：transition: transform 0.3s ease, visibility 0.3s
transform: translateX() 的写法陷阱
写成 transform: translate(-100%) 是错的：缺少轴向标识，部分浏览器会解析为 X 和 Y 同时偏移，导致面板下移；写成 translateX(-100)（漏单位）也无效。
必须写全：transform: translateX(100%) 或 translateX(-100%)，百分比基于父容器宽度。
- 如果 tab 面板宽度不固定（比如文字长度差异大），用
100%比像素值更安全 - 所有面板需设
position: absolute; top: 0; left: 0，否则translateX会被文档流干扰 - 父容器必须设
position: relative，否则absolute定位脱出上下文
指示条（underline）不同步的根本原因
点击后指示条闪一下、延迟移动、停在错误位置，不是 CSS 写错了，而是 JS 更新 class 和 DOM 测量时机错位。
根本解法是禁用 left、margin-left —— 它们触发 layout（重排），卡顿且不可预测。
- 指示条必须用
transform: translateX(Npx)控制水平位置 - 宽度和位置都要动态设置：
style.width = tab.offsetWidth + 'px'，style.transform = 'translateX(' + offset + 'px)' - 过渡只作用于
transform和width，其他属性不参与transition - 首次渲染前，确保所有 tab 元素已挂载且尺寸稳定，否则
offsetWidth取值为 0
移动端卡顿的性能红线
低端 Android 或 WebView 环境里，left、margin、width 动画极易卡顿，因为它们强制触发 layout；transform 和 opacity 才走 GPU 合成层。
哪怕只是改个 width，只要没加 will-change: width 或没用 transform 替代，就可能掉帧。
- 所有动画属性必须限定在
transform、opacity范围内 - 别用
height或max-height过渡——内容高度不确定时必然跳变 - 过渡声明必须写在基础样式中，不能靠 JS 动态插入 class 后才生效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
