Transformationen für CSS-Anzeigeeigenschaften

Question

Ich entwerfe derzeit ein CSS-Mega-Dropdown-Menü – im Grunde ein normales reines CSS-Dropdown-Menü, aber mit unterschiedlichen Inhaltstypen.

Derzeit scheinen CSS 3-Übergänge nicht mit dem Attribut „display“ zu funktionieren, d. h. Sie können keine Art von Übergang/Code> von display: none< display: block

Gibt es eine Möglichkeit, das Menü der zweiten Ebene im obigen Beispiel „einzublenden“, wenn jemand mit der Maus über einen der Menüpunkte der obersten Ebene fährt?

Ich weiß, dass Sie eine Transformation für das Attribut visibility: verwenden können, aber mir fällt keine Möglichkeit ein, sie effizient zu nutzen.

Ich habe es auch mit der Höhe versucht, bin aber kläglich gescheitert.

Ich weiß auch, dass es einfach ist, dies mit JavaScript zu tun, aber ich möchte mich der Herausforderung stellen, nur CSS zu verwenden, und ich denke, meine Fähigkeiten sind etwas mangelhaft.

Answer 1

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

我通过将两个

绝对定位并将隐藏的设置为 opacity: 0 来实现这一效果。

如果您将 display 属性从 none 切换为 block，其他元素上的转换将不会发生。

要解决此问题，请始终允许元素为 display: block，但通过调整以下任一方式来隐藏元素：

1. 将高度设置为0。
2. 将不透明度设置为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>