如何使用 vanilla javascript 或 css 为边框设置动画

Question

我将边框底部颜色设置为灰色并将过渡添加到 .3s，并添加“：悬停”效果，因此在悬停时它会将其颜色更改为蓝色。问题与此有关：当我将鼠标放在具有悬停效果的元素上时，我设置的边框（蓝色）从上到下出现（下降效果）。

this is it

现在我的客户希望边框在悬停时从左到右出现，并且边框不应在悬停在另一个列表项上时消失，它（边框）必须“落后”光标试图“抓住”光标并填充下一个列表项的边框位置。我希望你得到我想要的。我知道在 css 中不可能做到这一点，但我不知道如何在 js 中做到这一点，有人可以帮我解决这个问题并向我解释该怎么做，而不使用任何像 jQuery 这样的框架。

Answer 1

您可以按照 Thusitha 所说的那样使用 width 属性来制作动画。

这里我附上了codepen 链接以实现该效果。

ul {
  list-style-type: none;
  border-bottom: 5px solid #eee;
}
ul li {
  display: inline-block;
  position: relative;
  padding: 20px;
}
ul li:before {
  content: "";
  position: absolute;
  height: 5px;
  width: 0px;
  bottom: -5px;
  left: 0;
  background: blue;
  transition: all linear 0.25s;
}

/* Expanding Animation Element */
ul li:hover:before {
  width: 100%
}

<div class="box">
  <ul>
    <li>Homepage</li>
    <li>Style Demo</li>
  </ul>  
</div>