CSS 動畫可以與設定為「display: none」的元素一起使用嗎？

CSS 動畫和顯示元素

您已嘗試對最初具有 display: none 的元素使用 CSS 動畫。雖然這似乎是動態顯示和隱藏元素的簡單方法，但 CSS 限制阻止了它。

顯示問題：無

CSS 動畫無法處理之間的轉換display: none 和 display: block 或 height: 0 和 height: auto 之間。如果可能的話，您需要對高度進行硬編碼，否則需要使用 JavaScript。

設定高度

在硬編碼高度不可行的情況下，您可以使用溢位:hidden 以隱藏元素並將其高度設為 0。當您準備好顯示它時，將溢位設定回可見並將高度設定為完整動畫

範例程式碼

CSS:

CSS:

CSS:

CSS:

CSS:CSS:HTML:在此範例中，溢位： hide 確保元素在其高度從 0到動畫時保持隱藏狀態300px。 注意： CSS 範例使用普通 CSS。如果您使用 Animate.css，則可以將 @keyframes 規則替換為對應的 Animate.css 類別。 這種方法可讓您在不依賴 display: none 或 jQuery 的情況下平滑地對元素進行動畫處理，從而提供更平滑的過渡以及更精準的時序控制。

以上是CSS 動畫可以與設定為「display: none」的元素一起使用嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！