「transition: all」會減慢 CSS3 轉換速度嗎？

「過渡：全部」是否會阻礙 CSS3 轉換速度？

使用 CSS3 轉場可為 Web 元素提供動畫效果。常見的做法是使用「transition: all」來統一針對多個元素的所有轉換。然而，關於這種方法是否會損害渲染效能存在爭議。

詢問：可以針對每個元素的特定過渡屬性（例如，「transition: opacity .2s escape-in​​」）與使用「過渡」相比，動畫效果更快、更流暢：所有」？

澄清： CSS引擎搜尋「所有」過渡屬性（即使是具有單一屬性的元素）是否可能會減慢渲染速度？ : all」可能會帶來顯著的效能缺陷。即使某些屬性保持不變或對使用者不可見（例如顏色或尺寸變更），瀏覽器也可能會執行不必的轉換檢查。

示範：

此Dabblet示範了這個問題：http://dabblet.com/gist/1657661。

要最佳化效能，請避免使用「過渡」 ：全部」並選擇有針對性的過渡（例如，「過渡：邊距.2s 緩入”）。這限制了不必要的檢查並降低了不需要的動畫的風險。

其他注意事項：

「過渡：全部」也會導致不良效果，例如動畫「飛濺」頁面加載，在應用過渡效果之前渲染初始樣式。有針對性的轉換有助於緩解這個問題。

以上是「transition: all」會減慢 CSS3 轉換速度嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！