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

Question

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

this is it

现在我的客户希望边框在悬停时从左到右出现并且边框不应该在悬停在另一个列表项上时消失，它（边框）必须 'lag behind' 光标试图 'catch on' 光标并填充下一个列表项的边框位置。我希望你能得到我想要的。我知道在 css 中是不可能的，但我不知道如何在 js 中做到这一点，有人可以帮我解决这个问题并向我解释该怎么做，而无需使用 [=22 之类的任何框架=].

Answer 1

您可以使用 width 属性制作动画，正如 Thusitha 所说。

这里我附上了 codepen link 的效果。

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>

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

How to animate border using vanilla javascript or css

javascript

css

css-animations

jquery-animate