问题描述
您可以连接两个或更多转换,visibility
这一次很方便。
div {
border: 1px solid #eee;
}
div > ul {
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
visibility: visible;
opacity: 1;
}
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
(不要忘记transition
属性的供应商前缀。)
您需要通过其他方式隐藏元素才能使其正常工作。
我通过<div>
绝对定位 s 并将隐藏的设置为来实现效果opacity: 0
。
要解决此问题,请始终允许元素为display: block
,但通过调整以下任何方式隐藏元素:
- 设置
height
为0
。 - 设置
opacity
为0
。 - 将该元素定位在另一个具有
overflow: hidden
.
可能有更多解决方案,但如果您将元素切换为display: none
. 例如,您可以尝试这样的事情:
div {
display: none;
transition: opacity 1s ease-out;
opacity: 0;
}
div.active {
opacity: 1;
display: block;
}
但这。根据我的经验,我发现这无济于事。
因此,您将始终需要保留该元素display: block
- 但您可以通过执行以下操作来绕过它:
div {
transition: opacity 1s ease-out;
opacity: 0;
height: 0;
overflow: hidden;
}
div.active {
opacity: 1;
height: auto;
}
解决方法
我目前正在设计一个 CSS ‘mega dropdown’ 菜单 - 基本上是一个常规的纯 CSS 下拉菜单,但包含不同类型的内容。
目前,CSS 3 过渡似乎不适用于 ‘display’ 属性,也就是说,您不能进行任何类型的从display: noneto display: block(或任何组合)过渡。
当有人将鼠标悬停在顶级菜单项之一上时,是否有办法让上例中的二级菜单“淡入”?
我知道您可以在visibility:属性上使用转换,但我想不出一种有效使用它的方法。
我也尝试过使用高度,但这只是失败了。
我也知道使用 JavaScript 实现这一点很简单,但我想挑战自己只使用 CSS,而且我想我有点短。