CSS display 属性上的转换

Question

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

目前 ，CSS 3 过渡似乎不适用于 ‘display’ 属性，即，您不能从 display: none 到 display: block （或任意组合）。

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

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

我也尝试过使用高度，但这只是失败了。

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

原文由 RichardTape 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 属性的供应商前缀。）

更多细节在 这篇文章中。

原文由 Guillermo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

我通过绝对定位 <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;
}

原文由 Jim Jeffers 发布，翻译遵循 CC BY-SA 4.0 许可协议