Question

我需要在悬停几个<li>项目时为height属性设置动画。它们是垂直居中的flexbox项。在正常状态下，它们具有固定的高度，并且看起来一切都很好。但是，当它们处于悬停状态时，当我尝试将其高度转换为新值时，它们会上下摆动。但仅限于Blisk。太奇怪了。

我有一个演示小提琴来演示此行为。这里是链接：https://jsfiddle.net/ehdk2tj3/。

可以在Blisk 11.0.157.186中重现该问题。但是，在Chrome 72.0.3626.121中，Opera 58.0.3135.107和FF 65.0.1可以正常运行。

由于Blisk不是通用浏览器，这是我可以完全忽略的与Blisk相关的怪异问题吗？

除了小提琴，我还提供了与下面的问题相同的代码；

HTML：

<ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
</ul>

和CSS：

ul {
  display: flex; align-items: center;
}
li {
  display: flex; align-items: center;
  height: 125px;
  transition: height 350ms;
  border-top: 2px solid white;
  border-bottom: 2px solid white;
  list-style: none;
}
li:hover {
  height: 75px;
  border-top: 2px solid red;
  border-bottom: 2px solid red;
}

我希望<li>能够“干净”地“收缩”，直到一切都恢复到最终状态时才不断反弹。

Answer 1

我使用padding而不是height来对齐列表。并且还删除了flex中使用的inline-block，以避免在悬停时缩小。我希望该解决方案将支持所有浏览器。

* {
    box-sizing: border-box;
    position: relative;
}

ul {
    display: flex;
}

li:hover {
    border-top: 2px solid red;
    border-bottom: 2px solid red;
    padding: 15px 5px 20px;
}

li {
    transition: padding 350ms;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    list-style: none;
    display: inline-block;
    align-self: center;
    padding: 25px 5px 30px;
}

<ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
</ul>

转换CSS height属性会导致Blisk出现“摆动”

1 个答案: