css - 转换 CSS 高度属性会导致 Blisk 中的“摆动”
问题描述
我需要在悬停一些<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>
推荐阅读
- javascript - 如何访问 mySql 查询的结果
- java - java - 如何根据分隔符在java中切片/拆分数组列表?
- python - 在 python 中没有发生 HTML 解码
- c# - Azure Text to Speech 需要一段时间才能输出歌曲
- python - Django - 确保相同模型类型的表中的 2 个字段对于实体没有相同的值
- android - 在 Flutter 中无法使用 BoxDecoration 图像
- sql - 当左表中没有值时连接表
- python - 我有这个错误: TypeError: TextIOWrapper.write() 在我编码时只采用一个参数(给定 16 个)
- powershell - 如何一次又一次地重复powershell命令?
- scaling - `pyvista` 轴在原点没有缩放