帶顯示的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中文網其他相關文章!