void element.offsetWidth;是一行奇怪的代碼，它似乎什么也不做，但卻是 CSS 動畫工作所必需的。這條線有什么作用以及為什么需要它？如果整行被注釋掉，動畫會發生一次但不會重復。void（如果刪除它仍然有效。）完整的代碼/演示在這里；我嘗試復制以下相關摘錄：腳本.js：beatIndicator = document.getElementById("beatIndicator"),...// Happens every time a beat starts:beatIndicator.classList.remove("anim");void beatIndicator.offsetWidth; // Why is this line needed?beatIndicator.classList.add("anim");示例-高級.html<span style="display: none;" id="beatIndicator" class="pulse"></span><style>.pulse { width: 40px; height: 40px; border-radius: 50%; background: #f44336; z-index: 3; left: -18px; display: inline-block; vertical-align: middle; margin-left: 10px; } @keyframes pulse-anim { from { box-shadow: rgba(244, 67, 54, 1) 0px 0px 0px 0px; } to { box-shadow: rgba(244, 67, 54, 0) 0px 0px 0px 14px; } } .pulse.anim { animation: pulse-anim; } </style>
1 回答
泛舟湖上清波郎朗
TA貢獻1818條經驗 獲得超3個贊
當您對 dom 進行更改（例如 ）時classList.remove('anim')，這可能會導致頁面發生一系列更改。渲染這些更改可能會很昂貴，而且由于您連續更改多個內容的情況很常見，因此瀏覽器會嘗試批量處理累積的更改，并且僅在您正在執行的操作結束時執行計算。
因此，如果那條奇怪的線不存在，那么將會發生以下情況：
您刪除該類。瀏覽器注意到了這一點，但尚未重繪屏幕
您添加班級。瀏覽器注意到了這一點，但尚未重繪屏幕
您的函數完成，瀏覽器決定進行必要的計算以使頁面匹配您所要求的內容......但沒有任何改變！您已將頁面恢復到單擊處理程序開始之前的相同狀態。由于沒有任何改變，所以顯示保持不變；沒有動畫運行。
這行額外的代碼的作用是要求瀏覽器提供有關 dom 的信息。但為了知道 offsetWidth 是多少，瀏覽器必須放棄批量更改的計劃并立即執行頁面的回流。當前狀態沒有運行動畫類，這是一個更改，因此動畫會重置。稍后，當該函數完成時，它會再次執行計算，并發現您已經進行了另一項更改（相對于它為您提供 offsetWidth 時的更改），因此它也應用了該更改。
簡而言之：您迫使瀏覽器做額外的工作，而在這種情況下，這恰好是可取的。在大多數情況下，強迫瀏覽器做額外的工作是一件壞事。大多數時候，您希望避免以這種方式查詢 dom，因為它會降低性能。
讓它發揮作用的另一種方法是現在刪除該類，然后稍后添加該類，如下所示：
element.addEventListener("click", function(e){
element.classList.remove("anim"); setTimeout(() => element.classList.add("anim"), 0);
}, false);- 1 回答
- 0 關注
- 106 瀏覽
添加回答
舉報
0/150
提交
取消