如何強迫瀏覽器重排 CSS 轉換：有效動畫指南

CSS 轉換中的瀏覽器回流問題

使用 CSS3 轉換 DOM 元素時，通常需要強制瀏覽器回流來觸發動畫。如果按順序修改多個 CSS 屬性導致意外行為，瀏覽器可能會優化更改，從而導致動畫缺失。

要解決此問題，必須了解回流的概念。當瀏覽器重新計算文件樹的一部分的佈局時，就會發生重排，這是由區塊級元素的大小或位置的變更觸發的。

強制重排的一種技術涉及存取 offsetHeight 屬性修改樣式後的元素。這可以透過以下函數來完成：

function reflow(elt){
    console.log(elt.offsetHeight);
}

透過在更新元素的 CSS 後呼叫此函數，可以觸發回流，從而使轉換生效。以下是使用此技術的問題程式碼的修改範例：

ul.style.transition = 'none 0s linear 0s';
ul.style.left = '-600px';
reflow(ul);
ul.style.transition = 'all 0.2s ease-out';
ul.style.left = '0px';

另一個選項是使用void() 運算符，它可以防止最佳化器跳過屬性存取：

void(elt.offsetHeight);

這種技術是有效的，因為void 是一個一元運算符，它計算表達式，然後丟棄其結果，確保存取屬性的任何副作用被處決。

以上是如何強迫瀏覽器重排 CSS 轉換：有效動畫指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！