Javascript 如何正确设置横杆滑动的动画？

我有两个按钮，当用户单击它们时，它会带下划线。但是，我希望将.underline设置为动画/水平滑动到正在单击的按钮

演示：

目前为止，单击按钮时，.underline只会出现并消失。如何设置动画使其平滑滑动（x值发生变化）到选定按钮，而无需hacks和JQuery

功能切换选项卡（选项卡）{
如果（制表符==1）{
document.getElementById（“tab2”）.classList.add（“下划线”）；
document.getElementById（“tab1”）.classList.remove（“下划线”）；
}
否则如果（制表符===2）{
document.getElementById（“tab1”）.classList.add（“下划线”）；
document.getElementById（“tab2”）.classList.remove（“下划线”）；
}
}

.bar{
背景颜色：灰色；
填充：20px；
}
.下划线{
边框底部：5px纯红；
}
钮扣{
宽度：100px；
高度：50px；
背景色：白色；
}
按钮：焦点{
大纲：无；
}

表1
表2

给你。此处仅显示编辑的类：

.underline:after {
  border-bottom: 5px solid red;
  animation-name: slideIn;
  animation-duration: 1s;
  width: 100%;
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
}

@keyframes slideIn {
    from {width: 0;}
    to {width: 100%;}
}

button{
  position: relative;
  width: 100px;
  height: 50px;
  background-color: white;
}

---

我所做的是，我在按钮上使用了抽象的

after

元素，并将其定位为相对按钮的绝对位置。并使用css动画。

我没有设置边框动画，而是创建了一个对单击事件作出反应的附加元素。这允许我们跟踪“下划线”的位置，并在单击时在按钮之间缩放和设置动画

这可以修改为接受悬停事件，而不是使用

鼠标悬停

而不是

单击

let buttons=document.querySelectorAll（'button'）；
按钮。forEach（按钮=>{
addEventListener（'mouseover'，hoverboard）；//悬停事件
//按钮。addEventListener（“单击”，悬停板）；
});
功能悬停板（e）{
const board=document.querySelector（'.hoverboard'）；
//-1由于按钮的边框
设宽度=this.offsetWidth-1；
const firstChild=document.querySelector（“.bar按钮：第一个子项”）；
const lastChild=document.querySelector（“.bar按钮：最后一个子项”）；
//-19，因为左边的填充为20px，并且删除了按钮边框的1
left=this.offsetLeft-19；
board.style.cssText='变换：translateX（'+left+'px）；宽度：'+width+'px；'；
}

.bar{
位置：相对位置；
背景颜色：灰色；
填充：20px；
}
.下划线{
边框底部：5px纯红；
}
钮扣{
宽度：100px；
高度：50px；
背景色：白色；
}
按钮：焦点{
大纲：无；
}
.气垫船{
位置：绝对位置；
宽度：100px；
高度：3倍；
背景：红色；
过渡：变换.25秒缓变，宽度.25秒缓变；
}

表1
表2
表3

试试这个