谷歌翻译标签按钮激活指示器线条的移动实现原理求教

核心逻辑是用多个独立的下划线元素配合CSS过渡模拟「移动」效果，而非单个元素的位置平移，具体拆解如下：

• 每个标签按钮内部都包含一个独立的下划线<span>元素，默认状态为width: 0且opacity: 0，完全不可见。
• 当标签被激活时，通过添加active类，触发该标签内下划线的CSS过渡：从width: 0过渡到width: 100%，同时opacity从0变为1；而前一个激活标签的下划线则会反向过渡（从100%宽度缩到0，opacity变回0）。
• 由于所有标签的下划线都定位在同一水平高度（比如标签底部），前后两个下划线的收缩/展开动画衔接在一起，视觉上就会产生「一条线条从旧标签移动到新标签」的错觉，本质上是两个独立元素的动画叠加效果。

你遇到的问题原因： #

1. 手动设置opacity无动画：仅修改opacity只能控制显示/隐藏，缺少width属性的过渡动画。必须给下划线元素添加transition: width 0.3s ease, opacity 0.3s ease这类过渡规则，才能让宽度变化产生平滑的动画效果。
2. 添加overflow:hidden后动画失效：当给包含线条的span（标签容器）设置overflow:hidden时，会截断下划线元素的扩展范围——原本前一个标签的下划线收缩、当前标签的下划线展开的衔接过程被容器截断，自然无法呈现「从先前位置启动」的视觉效果。

简化实现示例： #

<div class="tab-container">
  <button class="tab is-active">源语言</button>
  <button class="tab">目标语言</button>
</div>

.tab-container {
  display: flex;
  gap: 24px;
  position: relative;
  padding-bottom: 8px;
}

.tab {
  background: none;
  border: none;
  padding: 8px 0;
  position: relative;
  cursor: pointer;
  font-size: 14px;
}

/* 每个标签自带下划线（用伪元素替代span，效果一致） */
.tab::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #1a73e8;
  opacity: 0;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab.is-active::after {
  width: 100%;
  opacity: 1;
}

这个示例用伪元素替代span实现了同样的效果，切换标签时，前后两个伪元素的宽度过渡会形成「线条移动」的视觉效果，完全不需要JS控制位置属性。

内容的提问来源于stack exchange，提问作者buga