用 css transition 实现标签页滑动：js 仅更新 activeindex 计算 translatex 偏移，css 通过 transform + cubic-bezier 过渡驱动 gpu 加速位移，无需 js 动画帧控制。
用 transition 实现标签页的顺滑左右滑动，关键不是靠 JS 控制动画帧，而是让 CSS 自己完成过渡——JS 只负责切换状态（比如当前激活的标签索引），CSS 负责视觉位移和缓动。这种方式性能好、代码简洁、兼容性强。
核心思路：用 transform + transition 驱动位移
不改 left/top（会触发重排），改 transform: translateX()（走 GPU 加速，无重排）。每个标签项用 flex 横向排列，外层容器设 overflow: hidden，再用一个包裹层通过 transform 整体平移，实现“视口切换”效果。
HTML 结构要支持平移定位
结构示例：
<div class="tabs-container"> <br> <div class="tabs-wrapper"> <br> <button class="tab-item">首页</button><br> <button class="tab-item">订单</button><br> <button class="tab-item">我的</button><br> </div> <br> </div>
其中：
– .tabs-container 是可视区域，固定宽高，overflow: hidden
– .tabs-wrapper 是可滑动容器，display: flex，宽度由子项撑开
– 位移逻辑作用在 .tabs-wrapper 上
CSS 动画规则必须明确且可复用
给 wrapper 添加过渡声明：
.tabs-wrapper {<br> transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);<br> display: flex;<br>}
推荐使用 cubic-bezier(0.25, 0.46, 0.45, 0.94) —— 比 ease 更轻快自然，适合标签切换这类短时交互。
每项宽度建议统一（如 flex: 0 0 120px），方便计算偏移量：
– 当前显示第 1 项（索引 0）→ transform: translateX(0)
– 显示第 2 项（索引 1）→ translateX(-120px)
– 显示第 n 项 → translateX(-n × 120px)
JS 只做状态同步，不写动画逻辑
例如 Vue 或原生 JS 中，只需更新偏移值：
- 记录当前激活索引
activeIndex - 计算偏移：
const offset = -activeIndex * itemWidth - 绑定到 wrapper 的 style：
transform: `translateX(${offset}px)`
不需要定时器、不需要手动插值、不需要清 timer —— transition 会自动补全中间帧。
如果用 Vue，可直接用 :style="{ transform: `translateX(${offset}px)` }"；React 同理用内联样式。避免用 class 切换多个预设 translate 值，那样不易维护。
