标签指示器动画（滑动指示条 + 内容淡入切换）

效果演示（真实可交互）

点击任意标签：渐变指示条从当前位置平滑滑向目标标签，并自动适配目标宽度；下方内容面板同步淡入并轻微上移，切换过程连贯跟手。标签栏是等宽布局，四个面板各含一个标题与一段说明文字。窗口缩放时指示条会自动重新定位，不会错位。

完整代码

HTML（标签按钮 + 独立指示条元素 + 面板组）：

<div class="tia-tabs">
  <button class="tia-tab active">首页</button>
  <button class="tia-tab">组件</button>
  <span class="tia-indicator"></span>   <!-- 滑动指示条 -->
</div>
<div class="tia-panels">
  <div class="tia-panel active">面板内容</div>
  <div class="tia-panel">面板内容</div>
</div>

CSS（指示条绝对定位，位移与宽度都走过渡）：

.tia-tabs { position: relative; display: flex; padding: 4px; }
.tia-indicator {
  position: absolute; top: 4px; bottom: 4px; left: 4px;
  border-radius: 9px; background: linear-gradient(135deg, #6c8cff, #8a5cff);
  transition: transform .35s cubic-bezier(.4, .1, .2, 1),
              width .35s cubic-bezier(.4, .1, .2, 1);   /* 位移与宽度同步过渡 */
}

JS（测量目标标签偏移与宽度写入指示条，约 15 行）：

const tabs = document.querySelectorAll('.tia-tab');
const panels = document.querySelectorAll('.tia-panel');
const indicator = document.querySelector('.tia-indicator');

const move = (tab) => {
  indicator.style.width = tab.offsetWidth + 'px';
  indicator.style.transform = `translateX(${tab.offsetLeft - 4}px)`;
};

tabs.forEach((tab) => {
  tab.addEventListener('click', () => {
    tabs.forEach((t) => t.classList.remove('active'));
    tab.classList.add('active');
    move(tab);
    panels.forEach((p, i) => p.classList.toggle('active', i === [...tabs].indexOf(tab)));
  });
});
move(document.querySelector('.tia-tab.active'));
window.addEventListener('resize', () => move(document.querySelector('.tia-tab.active')));

原理：指示条不是「动画到下一个位置」，而是每次点击后直接把目标 transform 与宽度写进样式，浏览器用 transition 平滑过渡。JS 的职责只有一个——用 offsetLeft 与 offsetWidth 读出目标标签相对标签栏的位置尺寸（容器 padding 4px 需在位移里扣除）。面板切换用透明度与 translateY 过渡实现淡入上移，比 display 切换多一层过渡的余地。

参数说明

兼容性与性能

• 仅依赖 transform 过渡与 offsetLeft 测量，Chrome 36+ / Safari 9+ / Firefox 49+ / Edge 全支持
• 动画只走 transform 合成路径，GPU 加速；指示条为单一元素，无多余节点
• resize 监听只在窗口缩放时执行一次测量，常驻开销为零
• 已加 role 语义与 aria 标注，配合原生 button 键盘可完整操作；如需箭头键切换，可在键盘事件里复用 move 逻辑

常见问题

Q: 指示条初始位置不在第一个标签上？ 检查页面加载后是否执行了一次 move(激活标签)。JS 在绑定事件后立即调用一次，若标签内容异步渲染（如图片撑高），需在内容就绪后重新调用。

Q: 标签宽度变化时指示条没跟上？ 指示条宽度在点击时写入，若标签文字或字号动态变化，需要在这些变化发生后重新调用 move。resize 监听只覆盖窗口缩放，不覆盖内容变化。

Q: 想要下划线式指示条而不是胶囊？ 把指示条的 top 改为 auto、bottom 改为 0、高度设为 3px、圆角设为 2px，背景换成主题色即可；位移逻辑完全不变。

Q: 能商用吗？ 可以。本组件为粤喵自研原创实现，免费商用无需署名。