CSS 動畫和顯示:無
在CSS 中,為隱藏的元素(例如,顯示:無)設定動畫並不簡單。設定 display: none 會從文件流中刪除元素,但它仍然佔用空間。要解決此問題:
1.設定固定高度:
由於無法在display: none 和display: block 之間進行動畫處理,請將隱藏元素的初始高度固定為顯示時它將佔據的高度。
CSS:
#main-div { height: 0; display: block; overflow: hidden; animation-delay: 3.5s; }
2。使用動畫關鍵幀:
定義一個動畫關鍵幀,將元素從高度 0 過渡到所需高度。
CSS:
@keyframes main-div-slide { from { height: 0; } to { height: 375px; } }
3。應用動畫:
將動畫關鍵影格與隱藏元素關聯。
CSS:
#main-div { animation: main-div-slide 1s ease 3.5s forwards; }
現在,隱藏元素將無縫地滑落到視圖中,而不影響頁面上其他元素的佈局。
注意:如果隱藏元素的高度固定,則此方法有效。對於動態高度,您可能需要使用 jQuery 或 JavaScript。
以上是如何為 CSS 中的隱藏元素添加動畫效果?的詳細內容。更多資訊請關注PHP中文網其他相關文章!