css - CSS 显示属性上的转换

Question

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

目前，CSS 3 过渡似乎不适用于“display”属性，即您无法从 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 .