星期三, 6月 28, 2017

CSS3 will-change 屬性

透過 CSS3 中的 will-change 可以提前讓瀏覽器知道某個區塊將會發生什麼動畫效果,
對於在 Safari 中某些動畫造成文字粗細閃爍的 bug,可以用這個方法修復,
對於其他動畫不夠順暢時,或許可以試試看這個屬性,
但這屬性還滿新的,使用前必須看看有沒有支援。


img{

    will-change: transform;
}


關於CSS的will-change屬性的介紹

上述文章建議使用 will-change 時,在需要打開的時候再打開比較好,
減少瀏覽器一直處在隨時待命耗費效能的狀況。

例如,
Button 在 active 時會變化,可以將 will-change 下在其 hover 時;
Button 在 hover 時會變化,可以將 will-change 下在其父層 hover 時。

其他參考:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/will-change

CSS3 will-change 屬性

透過 CSS3 中的 will-change 可以提前讓瀏覽器知道某個區塊將會發生什麼動畫效果, 對於在 Safari 中某些動畫造成文字粗細閃爍的 bug,可以用這個方法修復, 對於其他動畫不夠順暢時,或許可以試試看這個屬性, 但這屬性還滿新的,使用前必須看看有沒有支援。...