如何实现下划线平滑滑动到被点击按钮的动画效果？

我帮你搞定这个问题！核心思路是给下划线元素添加位置和宽度的过渡动画，再通过JS动态计算并设置它的位置，而不是简单切换显示状态。这样就能实现平滑滑动的效果，完全不用jQuery或者奇怪的hack。

具体步骤和代码示例： #

1. 调整CSS，给下划线添加过渡动画

首先给.underline加上transition属性，让它的left和width变化时能平滑过渡：

.underline {
  position: absolute;
  bottom: 0;
  height: 2px;
  background-color: #000;
  /* 关键：添加过渡动画 */
  transition: left 0.3s ease, width 0.3s ease;
}

这里的0.3s是动画时长，ease是缓动函数，你可以根据需要调整数值。

2. 修改JS逻辑，动态计算下划线的位置和宽度

不用再切换显示隐藏，而是通过计算每个按钮的偏移量和宽度，来设置下划线的left和width属性：

// 先获取所有按钮和下划线元素
const tab1 = document.getElementById("tab1");
const tab2 = document.getElementById("tab2");
const underline = document.querySelector(".underline");

// 初始化：让下划线默认在第一个按钮下方
function initUnderline() {
  underline.style.left = `${tab1.offsetLeft}px`;
  underline.style.width = `${tab1.offsetWidth}px`;
}

// 切换标签的函数
function switchTab(tab) {
  const activeTab = tab === 1 ? tab1 : tab2;
  // 设置下划线的位置和宽度
  underline.style.left = `${activeTab.offsetLeft}px`;
  underline.style.width = `${activeTab.offsetWidth}px`;
  
  // 如果需要切换按钮的激活样式，这里可以继续加逻辑
  // 比如：tab1.classList.toggle("active", tab === 1);
  //      tab2.classList.toggle("active", tab === 2);
}

// 页面加载完成后初始化
window.addEventListener("load", initUnderline);

3. HTML结构参考（确保按钮容器是相对定位）

要让下划线的绝对定位生效，按钮的父容器需要设置position: relative：

<div class="tab-container" style="position: relative; display: inline-block;">
  <button id="tab1" onclick="switchTab(1)">按钮1</button>
  <button id="tab2" onclick="switchTab(2)">按钮2</button>
  <div class="underline"></div>
</div>

为什么这个方案可行？ #

• 利用CSS的transition属性，自动处理位置和宽度的平滑过渡，不需要手动写动画帧。
• 通过offsetLeft和offsetWidth获取按钮的真实位置和宽度，确保下划线能精准对齐按钮。
• 完全使用原生JS和CSS，没有依赖任何库，代码简洁易维护。

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