首頁 > web前端 > css教學 > 主體

如何只使用 CSS 使 Div 具有 Display: None 動畫?

DDD
發布: 2024-11-12 14:32:02
原創
735 人瀏覽過

How to Animate a Div with Display: None Using Only CSS?

帶顯示的CSS 動畫:無困境

使用CSS 動畫時,您可能會遇到希望稍後滑入div 的情況而其他元素最初填充其空間。但是,如果將動畫 div 設定為 display: none,它會繼續佔用空間並阻止其他元素正常流動。

要解決此問題,您需要一種方法來確保動畫 div 不會在指定時間出現之前不會佔用空間。雖然您可以考慮使用 jQuery,但本文重點介紹純 CSS 解決方案,以實現更平滑和受控的計時。

硬編碼高度編碼

關鍵在於對高度進行硬編碼動畫 div。這樣,它就保留了必要的空間,而不會使其自身可見。然後,您可以使用 CSS 動畫在適當的時刻更改其高度。

例如,請考慮以下程式碼:

#main-image {
    height: 0;
    overflow: hidden;
    transition: height 1s ease 3.5s;
}
登入後複製

帶有關鍵影格的動畫

高度固定後,您可以使用關鍵影格來為其變化設定動畫。以下是一個範例:

#main-image.fadeInDownBig {
    height: 300px;
}
登入後複製

在此範例中,fadeInDownBig 類別在所需時間應用於主影像 div,觸發過渡到其預期高度。

瀏覽器支援與示範

這種純 CSS 解決方案在現代瀏覽器中運作良好。您可以透過以下連結觀看現場示範:

  • http://jsfiddle.net/duopixel/qD5XX/

透過使用此技術,您可以實現流暢的CSS 動畫,而不會出現display: none 的陷阱,確保您的div 按預期無縫流動。

以上是如何只使用 CSS 使 Div 具有 Display: None 動畫?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板