CSS显示属性的渐变效果

Question

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

目前，似乎CSS 3的过渡效果不适用于“display”属性，也就是说，无法从display: none过渡到display: block（或任何组合）。

在上面的示例中，有没有办法使第二级菜单在有人悬停在顶级菜单项上时“淡入”？

我知道可以在visibility:属性上使用过渡效果，但我无法想出有效使用的方法。

我还尝试使用高度，但结果非常糟糕。

我也知道使用JavaScript可以轻松实现这一点，但我想挑战自己只使用CSS，但我觉得我有点力不从心。

Answer 1

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

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

如果您将 display 属性从 none 切换到 block，则其他元素的过渡效果将不会发生。

为了解决这个问题，始终允许元素为 display: block，但通过以下任何方式隐藏元素：

1. 将 height 设置为 0。
2. 将 opacity 设置为 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>