css - CSS 显示属性的过渡

Question

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

目前，似乎 CSS 3 转换不适用于“显示”属性，即，您不能从 display: none< 进行任何类型的转换 到 display: block(或任何组合)。

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

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

我也试过使用高度，但失败得很惨。

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

Answer 1

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

更多详细信息在 this article 中.