Verlaufseffekt der CSS-Anzeigeeigenschaften

Question

Ich entwerfe derzeit ein CSS-„Super-Dropdown“ – im Grunde ein normales reines CSS-Dropdown, aber mit verschiedenen Arten von Inhalten darin.

Derzeit scheinen CSS 3-Übergangseffekte nicht auf das „display“-Attribut anzuwenden, das heißt, es gibt keine Möglichkeit zum Übergang von display: none bis display: block

Gibt es im obigen Beispiel eine Möglichkeit, das Menü der zweiten Ebene „einblenden“ zu lassen, wenn jemand mit der Maus über das oberste Menüelement fährt?

Ich weiß, dass Sie Übergangseffekte für das Attribut visibility: verwenden können, aber ich weiß nicht, wie ich es effektiv nutzen kann.

Ich habe es auch mit der Höhe versucht, aber die Ergebnisse waren schrecklich.

Ich weiß auch, dass dies leicht mit JavaScript erreicht werden kann, aber ich wollte mich der Herausforderung stellen, nur CSS zu verwenden, aber ich habe das Gefühl, dass ich ein wenig überfordert bin.

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>