在CSS 中，過渡提供了一種優雅的方式來平滑地動畫屬性隨時間的變化。但是，在某些情況下，可能會出現轉換無法執行或關聯的回呼仍未呼叫的情況。
在遊戲開發過程中向彈體元素分配新位置值時，就會出現這樣的情況。儘管用純 JS 替換了 jQuery 調用，但轉換似乎完全被跳過，並且沒有觸發任何回調。
缺失轉換之謎
奇怪的是，包裝CSS 位置在1ms setTimeout 內發生變化以某種方式解決了這個問題，儘管有時過渡仍然會被繞過。這種不一致引發了一個問題：為什麼 setTimeout 有幫助，為什麼回呼有時會失敗？
計算樣式的作用
理解這種行為的關鍵在於在 CSS 計算樣式中。當您透過 JavaScript 設定新樣式時，瀏覽器可能不會立即套用它們。相反，元素的計算樣式保持不變，導致內聯樣式和計算值之間存在差異。
對於projectile元素，雖然內聯樣式指定了left和top值，但計算值style 最初保留預設值 0px。
對過渡的影響
過渡依賴計算樣式來決定動畫的開始和結束狀態。當初始計算樣式與您嘗試轉換的內聯樣式不同時，轉換基本上沒有任何效果並且似乎會跳過。
解決方案：強制回流
要解決此問題並確保過渡始終正確執行，有必要強制瀏覽器執行回流，從而重新計算計算的樣式。
實現此目的的一種方法是存取所需的屬性的最新樣式，例如 offsetHeight。在提供的程式碼中，animdiv.offsetHeight 在分配新的左側值和頂部值之前觸發重排。
結論
透過了解計算樣式的問題，您可以確保 CSS 轉換按預期運行並且可靠地調用回調。如果您觀察到不規則行為，請記住在轉換元素之前強制回流。
以上是為什麼 CSS 過渡有時會跳過或無法觸發回調？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
