理解問題
在所描述的場景中，有兩面個div ，其中一個最初使用display:none 隱藏。當使用show()或toggle()等方法顯示隱藏的div時，其屬性轉換不會順利發生。相反，div 會立即出現在所需的結束位置。
行為的原因
要理解此行為，我們需要深入研究 CSSOM ( CSS 物件模型）和 DOM（文件物件模型）。
CSS 過渡依賴於了解元素的初始計算樣式值來決定過渡的起點。但是，帶有 display:none 的元素沒有計算出的樣式值，因為它們在 CSSOM 中不被視為可見。
重排的影響
重排是一種重新計算的瀏覽器操作基於 DOM 或樣式規則更改的文檔佈局。當 display:none 被刪除時，瀏覽器會啟動回流來更新 DOM 和計算的樣式值。
在給定的場景中，如果在回流發生之前開始轉換，則隱藏 div 的初始計算樣式值將無效，導致突然出現。
解決問題
選項1：使用$.animate()
$.animate() 在執行動畫之前觸發重排，確保計算出的樣式值是最新的。
選項 2：手動強制重排
使用 requestAnimationFrame() 允許我們在下一次繪製操作之前安排程式碼執行。在回呼中，我們可以使用 document.body.offsetHeight 等方法強制回流，然後透過設定所需的 CSS 屬性值立即觸發轉換。
結論
CSS 轉換期間最初隱藏的元素突然出現是由於缺乏有效的計算樣式值。透過了解回流過程並使用強制回流的技術，我們可以確保最初隱藏的元素平滑過渡。
以上是為什麼 CSS 過渡不適用於最初隱藏的元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
