Question

我有：

#t {
  background: bisque;
  display:block;
  width: 200px;
  height: 100px;
  transition:0.5s;
}
#t:hover {
  border-bottom: 3px solid grey;
}

<div id="t"></div>

如您所见，当我将鼠标悬停时-transition效果开始“滞后”，可能是因为我添加了border-bottom作为不适当的（？）但不确定的悬停效果。 / p>

如何避免出现这种“滞后”现象，并为外观transition: 0.5s;添加border-bottom？

Answer 1

这是因为只能以整数值定义和“逐步穿过”边框大小，因此您不能具有子像素边框，这会导致抖动。一种解决方案将简单地渲染高度为3px的伪元素，但对其进行转换，使其以scaleY(0)开头，然后在悬停时使用scaleY(1)将其扩展到全高。

要使外观从伪元素的顶部边缘开始缩放，还需要使用transform-origin: top center。

请参阅概念证明：

#t {
  background: bisque;
  display:block;
  width: 200px;
  height: 100px;
  position: relative;
}
#t::before {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 3px;
  background-color: grey;
  content: '';
  transform: scaleY(0);
  transform-origin: top center;
  transition: 0.5s;
}
#t:hover::before {
  transform: scaleY(1);
}

<div id="t"></div>

Answer 2

您还可以使用框阴影模拟边框底部。

#t {
    display: block;
    background: bisque;
    position: relative;
    width: 200px;
    height: 100px;
    transition: box-shadow 0.5s linear;
  }  

  #t:hover {
    box-shadow: 0 3px 0 0 grey;
  }

<div id="t"></div>

感谢Animating Border

的CSS技巧

Answer 3

您可以将边框设置为透明颜色，并且在悬停时只需将其更改为可见颜色即可，该颜色应该更加平滑

CSS过渡效果“滞后”

3 个答案: