Question

我尝试使用CSS动画在悬停时将border-bottom从上到下移动到底部。但当我将光标放在边框的下边缘时，它开始闪烁，光标和边框也会不断变化。

＆＃13;

div {
  border-bottom: 1px solid;
  display: inline;
  padding-bottom: 5px;
  transition: padding-bottom .5s;
}

div:hover {
  padding-bottom: 2px;
  cursor: pointer;
  transition: padding-bottom .5s;
}

＆＃13;

<div>
  Hello world
</div>

＆＃13;

有没有办法停止闪烁问题或任何其他方式来获得相同的动画效果。

Answer 1

使用另一个元素，给外部元素一个固定的高度，并在悬停时使内部项更小。我添加了背景颜色以显示正在发生的事情：

＆＃13;

div{
  display: inline-block;
  cursor: pointer;
  height: 28px; /* lineheight+border+padding */
  background: red;
}

div >span{
  border-bottom: 1px solid;
  display: inline-block;
  padding-bottom: 5px;
  transition: padding-bottom .5s;
  line-height: 22px;
  background: yellow;
}

div:hover span{
  padding-bottom: 2px;
  transition: padding-bottom .5s;
}

＆＃13;

<div>
  <span>Hello World</span>
</div>

＆＃13;

Answer 2

这有效：

div span {
  border-bottom: 1px solid;
  cursor: pointer;
  display: inline;
  padding-bottom: 5px;
  transition: padding-bottom .5s;
}

div span:hover {
  padding-bottom: 2px;
}

Answer 3

尝试使用伪:: after元素而不是边框。

在这里小提琴：https://jsfiddle.net/L9huwv1f/

{{1}}

Answer 4

我认为问题在于，当尝试移动3px时，.5s持续时间太长。

在此示例中，您可以看到.2s计时器对于3px变化更具流动性，并且.5s计时器在转换更多像素时也是流畅的

div {
  border-bottom: 1px solid;
  display: inline;
}

div:hover {
  padding-bottom: 2px;
  cursor: pointer;
}

.div1 {
  padding-bottom: 5px;
  transition: padding-bottom .2s;
}

.div2 {
  padding-bottom: 15px;
  transition: padding-bottom .5s;
}

<div class="div1">
  Hello world 1
</div>
<br/><br/><br/>
<div class="div2">
  Hello world 2
</div>

Css：边界底部过渡问题

4 个答案: