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。