CSS 顯示屬性上的轉換-PHP中文網路問答

文章專題學習下載問答程式設計字典遊戲最近更新

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)

CSS 顯示屬性上的轉換

P粉958986070 2023-08-23 12:27:32

371

我目前正在設計一個 CSS「大型下拉」選單 - 基本上是一個常規的純 CSS 下拉選單，但包含不同類型的內容。 目前，CSS 3 過渡似乎不適用於“display”屬性，即您無法從<code>display: none< 進行任何類型的過渡/code> 到< code>display: block</code> （或任意組合）。 </code><code> 當有人將滑鼠懸停在頂級選單項目之一上時，是否有辦法使上例中的第二層選單「淡入」？ 我知道您可以在 <code>visibility:</code> 屬性上使用轉換，但我想不出有效使用它的方法。 我也嘗試過使用高度，但慘敗。 我也知道使用 JavaScript 實現這一點很簡單，但我想挑戰自己只使用 CSS，而且我認為我的能力有點不足。 </code>

P粉958986070

全部回覆(2)

P粉7014918972023-08-24 10:06:54 2樓

您需要透過其他方式隱藏該元素才能使其正常運作。

我透過將兩個

 絕對定位並將隱藏的設定為 opacity: 0 來實現這一效果。 

如果您將 display 屬性從 none 切換為 block，其他元素上的轉換將不會發生。 强>

要解決此問題，請始終允許元素為 display: block，但透過調整以下任一方式來隱藏元素：

將高度設定為0。 
將不透明度設定為0。 
將該元素放置在另一個具有 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;
}

點贊 +0

新增回覆

P粉0717437322023-08-24 00:00:44 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;
}