CSS 显示属性上的转换

Question

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

目前，CSS 3 过渡似乎不适用于“display”属性，即您无法从 display: none< 进行任何类型的过渡/code> 到 display: block （或任意组合）。

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

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

我也尝试过使用高度，但惨败。

我也知道使用 JavaScript 实现这一点很简单，但我想挑战自己只使用 CSS，而且我认为我的能力有点不足。

Answer 1

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

我通过将两个

绝对定位并将隐藏的设置为 opacity: 0 来实现这一效果。

如果您将 display 属性从 none 切换为 block，其他元素上的转换将不会发生。强>

要解决此问题，请始终允许元素为 display: block，但通过调整以下任一方式来隐藏元素：

1. 将高度设置为0。
2. 将不透明度设置为0。
3. 将该元素放置在另一个具有 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;
}

Answer 2

您可以连接两个或更多过渡，而 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>