CSS顯示屬性的漸層效果

Question

我目前正在設計一個CSS的「超級下拉選單」 - 基本上是一個常規的純CSS下拉選單，但其中包含不同類型的內容。

目前，似乎CSS 3的過渡效果不適用於「display」屬性，也就是說，無法從display: none過渡到< code>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>