javascript - 如何正确地为酒吧滑动制作动画？

Question

我有两个按钮，当用户点击它们时，它会带有下划线。但是，我希望 .underline 动画/水平滑动到被点击的按钮。

演示:https://jsfiddle.net/ds1wr736/11/

截至目前，.underline 仅在单击按钮时出现和消失。如何在不使用 hack 和 JQuery 的情况下为其设置动画以平滑地滑动(x 值改变)到选定的按钮？

function switchTab(tab) {
  if (tab === 1) {
    document.getElementById("tab2").classList.add("underline");
    document.getElementById("tab1").classList.remove("underline");
  }
  else if (tab === 2) {
    document.getElementById("tab1").classList.add("underline");
    document.getElementById("tab2").classList.remove("underline");
  }
}

.bar {
  background-color: gray;
  padding: 20px;
}

.underline {
  border-bottom: 5px solid red;
}

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

button:focus {
  outline: none;
}

<div class="bar">
  <button id='tab1' class="underline" onclick='switchTab(2)'>Tab 1</button>
  <button id='tab2' onclick='switchTab(1)'>Tab 2</button>
</div>

Answer 1

我没有创建边框动画，而是创建了一个对点击事件使用react的附加元素。这使我们能够跟踪“下划线”的位置，并在单击时在按钮之间进行缩放和动画处理。

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

let buttons = document.querySelectorAll('button');

buttons.forEach(button => {
  button.addEventListener('mouseover', hoverboard); // Hover event
  //button.addEventListener('click', hoverboard);
});

function hoverboard(e) {

  const board = document.querySelector('.hoverboard');
  // - 1 due to the border of the button
  let width = this.offsetWidth - 1;
  const firstChild = document.querySelector('.bar button:first-child');
  const lastChild = document.querySelector('.bar button:last-child');
  // - 19 due to padding being 20px on the left and removing 1 for the button's border
  let left = this.offsetLeft - 19;

  board.style.cssText = 'transform: translateX(' + left + 'px); width: ' + width + 'px;';

}

.bar {
  position: relative;
  background-color: gray;
  padding: 20px;
}

.underline {
  border-bottom: 5px solid red;
}

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

button:focus {
  outline: none;
}

.hoverboard {
  position: absolute;
  width: 100px;
  height: 3px;
  background: red;
  transition: transform .25s ease, width .25s ease;
}

<div class="bar">
  <button id='tab1'>Tab 1</button>
  <button id='tab2' style="width: 65px;">Tab 2</button>
  <button>Tab 3</button>
  <div class="hoverboard"></div>
</div>