強制瀏覽器來觸發迴流，同時改變CSS

我基於CSS3過渡構建非jQuery的響應圖像滑塊。強制瀏覽器來觸發迴流，同時改變CSS

結構簡單：視域，且內部相對定位UL左浮動LIS。

我面臨這樣的情況下一個問題：

用戶點擊「上一頁」箭頭。
JS在當前顯示的LI節點之前追加正確的LI。
目前UL已成立CSS轉換爲none 0s linear防止動畫的變化。在這一刻，我通過滑塊寬度（比如說：從0px到-1200px）減少UL CSS剩餘值，使視圖與原來一樣。
現在我改變UL過渡屬性all 0.2s ease-out。
現在我正在更改UL的左側屬性來觸發CSS3動畫。（比方說：從-1200px到0px）。

問題是什麼？瀏覽器簡化了更改並且不會製作任何動畫。

Stoyan Stefanov在他的博客here上寫過關於重排問題，但在這種情況下試圖強制重排元素不起作用。

這是一段代碼，這樣做（我跳過了簡化瀏覽器的前綴）：

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

這裏是小提琴在行動中看到的問題：http://jsfiddle.net/9WX5b/1/

來源

2014-02-09 Simon

僅當CSS中的屬性發生更改時纔會出現動畫。沒有必要應用'none 0s linear'，直到你改變'left'屬性纔會生成動畫。 –

禁用轉換非常重要，因爲我必須在添加新幻燈片後不可見地修復較舊幻燈片的位置。 – Simon

請求一個元素的offsetHeight可以很好地完成一切。您可以使用此功能強制進行迴流，並將樣式已更改的元素傳遞給它：

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

並調用此處需要回流。看到這個例子：http://jsfiddle.net/9WX5b/2/

編輯：最近需要做到這一點，並想知道是否有更好的辦法，而不是CONSOLE.LOG它。你不能只寫elt.offsetHeight作爲自己的聲明，因爲優化器（Chrome的，至少）不會觸發迴流，因爲它只是訪問一個沒有getter設置的屬性，甚至不需要評估它。因此，AFAIK最便宜的方法是void(elt.offsetHeight)，因爲它不知道void是否有副作用。（可以被重寫或者什麼，idk）。

來源

2014-02-09 21:14:35 Markasoftware

謝謝，你救了我的一天！此外，我使用translate3d（如果支持）更流暢的動畫，並且所有瀏覽器中的任何內容都可以作爲魅力使用。再次感謝你。 – Simon

你甚至不需要'console.log'。只需'elt.offsetHeight'就足夠了 – HerrSerker

這隻適用於Webkit瀏覽器。 – TrungDQ

function reflow(element) { 
    if (element === undefined) { 
     element = document.documentElement; 
    } 
    void(element.offsetHeight); 
}

它適用於Chrome和FF，似乎是最簡單和最便攜的方式來做ATM。

來源

2017-07-18 18:41:47 vaxquis

強制瀏覽器來觸發迴流，同時改變CSS

回答

相關問題