H5标签页文字颜色与胶囊背景联动过渡需统一状态驱动，通过CSS transition同步控制left/width/color等属性，配合active类切换和伪元素实现平滑整体动效。
在 H5 中实现标签页文字颜色与背景高亮胶囊（即“选中态胶囊”）的联动过渡，核心是让文字颜色变化和胶囊背景位移/缩放/颜色渐变同步、平滑，且视觉上形成“一个整体”的动效。关键不在于分别做两个动画，而在于用统一状态驱动二者，并借助 CSS 过渡（transition）或 CSS 动画（@keyframes）控制时序与缓动。
1. 结构设计：用单个容器包裹文字 + 胶囊
推荐将每个 tab 项写成一个 <button> 或 <div role="tab">，内部包含文字和一个绝对定位的胶囊元素（如 <span class="highlight-pill"></span>）。胶囊不随文字内容变化，而是通过 left / width / transform 控制位置和大小。
- 胶囊用
position: absolute，父容器设position: relative - 胶囊的
left和width由 JS 动态计算（基于当前激活 tab 的 offsetLeft 和 offsetWidth），或用 CSS 自定义属性（--pill-left,--pill-width）配合 JS 更新 - 文字颜色直接通过
.tab.active .tab-text控制，避免用 JS 操作 color，优先走 CSS 类切换
2. 过渡控制：统一使用 transition + 缓动函数
胶囊的位移、缩放、背景色，以及文字颜色，全部通过 transition 声明，且使用相同持续时间与缓动函数（如 cubic-bezier(0.34, 1.56, 0.64, 1)，略带弹性感），才能视觉同步。
- 胶囊示例：
transition: left 0.3s ease, width 0.3s ease, background-color 0.3s ease; - 文字示例：
.tab-text { transition: color 0.3s ease; } - 避免混用
transform（如 translateX）和left—— 同一元素只选其一，否则可能触发重排影响性能
3. 状态同步：用 active 类 + CSS 变量驱动
不建议用 JS 分别修改多个样式属性。更优雅的方式是：JS 只切换 .tab.active 类，其余交由 CSS 计算：
- 给每个 tab 设置
data-index="0"，激活时在容器上加data-active="0" - 用 CSS :nth-child() 或属性选择器配合
--pill-left自定义属性动态设置胶囊位置（需 JS 注入） - 或者更轻量：胶囊作为伪元素
::after，用tab.active::after直接定义其尺寸与位置，文字颜色也由.tab.active .tab-text控制 —— 全部靠类名驱动，零内联样式
4. 高级技巧：用 transform + scale 实现“呼吸式”胶囊
如果想增强动效表现力，可让胶囊在激活瞬间轻微放大再回弹，模拟点击反馈：
- 胶囊默认
transform: scaleX(0); opacity: 0; - 激活时
transform: scaleX(1); opacity: 1;，并加transform-origin: center - 搭配
transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s ease; - 此时文字颜色过渡仍保持同速，整体节奏一致，不会割裂
不复杂但容易忽略的是：所有过渡属性必须在同一渲染帧内触发（比如不要先改 left 再 setTimeout 改 width），否则会断连。只要结构清晰、状态集中、CSS 过渡声明完整，文字与胶囊就能真正“联动”起来，而不是各自为政地动两下。
