纯css实现平滑tab滑动切换的关键是visibility+transform:translatex()+显式transition声明；用visibility:hidden保留布局占位，配合transform过渡，禁用display:none和height/max-height，所有transition须写在基础样式中并包含visibility。
纯 CSS 就能做出平滑的 tab 滑动切换，关键不是靠 opacity 或 display，而是用 visibility + transform: translateX() + 显式声明的 transition。
为什么用 visibility 而不是 display
display: none 一删就没了，浏览器不渲染、不参与布局、不触发重绘，transition 对它完全无效；visibility: hidden 保留 DOM 占位和尺寸信息，配合 transform 才能真正“滑走”。
常见错误是只写 transition: transform 0.3s，漏掉 visibility —— 结果切过去时面板瞬间闪现，没过渡。
- 所有 tab 面板初始状态必须设
visibility: hidden，不能依赖 JS 动态加类才生效 - 激活面板要同时覆盖
visibility: visible和transform: translateX(0) -
transition必须显式包含visibility，例如：transition: transform 0.3s ease, visibility 0.3s - 别用
height或max-height过渡——内容高度不确定时会跳变或卡顿
transform: translateX() 的写法陷阱
写成 transform: translate(-100%) 是错的：缺少轴向标识，部分浏览器会解析为 translateX(-100%) translateY(-100%)，导致面板下移；写成 translateX(-100)（漏单位）也无效。
- 必须写全
transform: translateX(100%)或translateX(-100%)，百分比基于父容器宽度 - 如果 tab 面板宽度不固定（比如文字长度差异大），用
100%比像素值更安全 - 所有面板需设
position: absolute+top: 0; left: 0，否则translateX会受文档流干扰 - 父容器必须设
position: relative，否则absolute定位会脱出上下文
指示条（underline）滑动不同步怎么办
点击后指示条闪一下、延迟移动、停在错误位置，根本原因是 JS 更新 class 和 DOM 测量时机错位，或者用了 left/margin-left 触发重排。
- 指示条元素必须用
transform: translateX(Npx)控制位置，禁用left、margin-left - 宽度和位置都要动态设置：
style.width = tab.offsetWidth + 'px'，style.transform = 'translateX(' + offset + 'px)' - 过渡只作用于
transform和width，其他属性不参与transition - 首次渲染前，确保所有 tab 元素已挂载且尺寸稳定，否则
offsetWidth取值为 0
移动端滑动卡顿的性能红线
低端 Android 或 WebView 环境里，left、margin、width 动画极易卡顿，因为它们触发 layout（重排）；transform 走合成层，GPU 加速默认生效。
- tab 面板容器必须设固定高度（如
height: 300px），避免内容撑开导致跳动 - 慎用
will-change: transform—— 仅在复杂场景下启用，滥用反而降低性能 - 缓动函数推荐
cubic-bezier(0.25, 0.46, 0.45, 0.94)，比ease更利落 - 动画时长控制在
0.25s–0.35s，太短用户感知不到，太长像加载中
最容易被忽略的是：所有 transition 必须写在常驻元素的基础样式里，而不是只写在 .active 类中；另外，visibility 的过渡必须显式声明，否则“从隐藏到显示”那一帧永远突兀。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
