CSS display 属性上的转换

一尘不染

CSS display 属性上的转换

CSS

我目前正在设计一个 CSS ‘mega dropdown’ 菜单 - 基本上是一个常规的纯 CSS 下拉菜单，但包含不同类型的内容。

目前，CSS 3 过渡似乎不适用于 ‘display’ 属性，也就是说，您不能进行任何类型的从display: noneto display: block（或任何组合）过渡。

当有人将鼠标悬停在顶级菜单项之一上时，是否有办法让上例中的二级菜单“淡入”？

我知道您可以在visibility:属性上使用转换，但我想不出一种有效使用它的方法。

我也尝试过使用高度，但这只是失败了。

我也知道使用 JavaScript 实现这一点很简单，但我想挑战自己只使用 CSS，而且我想我有点短。

阅读 176

2022-02-17

一尘不染

您可以连接两个或更多转换，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属性的供应商前缀。）

2022-02-17

一尘不染

您需要通过其他方式隐藏元素才能使其正常工作。

我通过<div>绝对定位 s 并将隐藏的设置为来实现效果opacity: 0。

如果您甚至将display属性从切换none到block，则不会发生在其他元素上的转换。

要解决此问题，请始终允许元素为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;
}

2022-02-17

CSS display 属性上的转换

共2个答案