CSS中will-change的注意點

說明

1、樣式表中不使用will-change。

2、給will-change足夠的時間來發揮它的作用。

3、用於針對超特殊變化(例如，left,opacity等)

如有必要，可在JavaScript中使用(新增和刪除)

修改後，刪除will-change。

不要同時宣告太多屬性。

別用太多的元素。

不要把資源浪費在停止變化的要素上。

例項

var el = document.getElementById('element');
 
// 當滑鼠移動到該元素上時給該元素設定 will-change 屬性
el.addEventListener('mouseenter', hintBrowser);
// 當 CSS 動畫結束後清除 will-change 屬性
el.addEventListener('animationEnd', removeHint);
 
function hintBrowser() {
    // 填寫上那些你知道的，會在 CSS 動畫中發生改變的 CSS 屬性名們
    this.style.willChange = 'transform, opacity';
}
 
function removeHint() {
    this.style.willChange = 'auto';
}

以上就是CSS中will-change的注意點，希望對大家有所幫助。更多程式設計基礎知識學習：

本文教程操作環境：windows7系統、css3版，DELL G3電腦。