void element.offsetWidth;是一行奇怪的代碼，它似乎什么也不做，但卻是 CSS 動(dòng)畫工作所必需的。這條線有什么作用以及為什么需要它？如果整行被注釋掉，動(dòng)畫會(huì)發(fā)生一次但不會(huì)重復(fù)。void（如果刪除它仍然有效。）完整的代碼/演示在這里；我嘗試復(fù)制以下相關(guān)摘錄：腳本.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");示例-高級(jí).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貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超3個(gè)贊
當(dāng)您對(duì) dom 進(jìn)行更改（例如 ）時(shí)classList.remove('anim')，這可能會(huì)導(dǎo)致頁(yè)面發(fā)生一系列更改。渲染這些更改可能會(huì)很昂貴，而且由于您連續(xù)更改多個(gè)內(nèi)容的情況很常見(jiàn)，因此瀏覽器會(huì)嘗試批量處理累積的更改，并且僅在您正在執(zhí)行的操作結(jié)束時(shí)執(zhí)行計(jì)算。
因此，如果那條奇怪的線不存在，那么將會(huì)發(fā)生以下情況：
您刪除該類。瀏覽器注意到了這一點(diǎn)，但尚未重繪屏幕
您添加班級(jí)。瀏覽器注意到了這一點(diǎn)，但尚未重繪屏幕
您的函數(shù)完成，瀏覽器決定進(jìn)行必要的計(jì)算以使頁(yè)面匹配您所要求的內(nèi)容......但沒(méi)有任何改變！您已將頁(yè)面恢復(fù)到單擊處理程序開(kāi)始之前的相同狀態(tài)。由于沒(méi)有任何改變，所以顯示保持不變；沒(méi)有動(dòng)畫運(yùn)行。
這行額外的代碼的作用是要求瀏覽器提供有關(guān) dom 的信息。但為了知道 offsetWidth 是多少，瀏覽器必須放棄批量更改的計(jì)劃并立即執(zhí)行頁(yè)面的回流。當(dāng)前狀態(tài)沒(méi)有運(yùn)行動(dòng)畫類，這是一個(gè)更改，因此動(dòng)畫會(huì)重置。稍后，當(dāng)該函數(shù)完成時(shí)，它會(huì)再次執(zhí)行計(jì)算，并發(fā)現(xiàn)您已經(jīng)進(jìn)行了另一項(xiàng)更改（相對(duì)于它為您提供 offsetWidth 時(shí)的更改），因此它也應(yīng)用了該更改。
簡(jiǎn)而言之：您迫使瀏覽器做額外的工作，而在這種情況下，這恰好是可取的。在大多數(shù)情況下，強(qiáng)迫瀏覽器做額外的工作是一件壞事。大多數(shù)時(shí)候，您希望避免以這種方式查詢 dom，因?yàn)樗鼤?huì)降低性能。
讓它發(fā)揮作用的另一種方法是現(xiàn)在刪除該類，然后稍后添加該類，如下所示：
element.addEventListener("click", function(e){
element.classList.remove("anim"); setTimeout(() => element.classList.add("anim"), 0);
}, false);- 1 回答
- 0 關(guān)注
- 115 瀏覽
添加回答
舉報(bào)
0/150
提交
取消