我需要在悬停几个<li>
项目时为高度属性设置动画。它们是垂直居中的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>
s能够“干净”地“收缩” - 不要一直上下跳动,直到一切都达到最终状态。
我使用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>