Các utility để tối ưu hóa các animation sắp tới của các phần tử dự kiến sẽ thay đổi.
| Class | Styles |
|---|---|
will-change-auto | will-change: auto; |
will-change-scroll | will-change: scroll-position; |
will-change-contents | will-change: contents; |
will-change-transform | will-change: transform; |
will-change-<custom-property> | will-change: var(<custom-property>); |
will-change-[<value>] | will-change: <value>; |
Sử dụng các utility will-change-scroll, will-change-contents và will-change-transform để tối ưu hóa một phần tử dự kiến sẽ thay đổi trong tương lai gần bằng cách hướng dẫn trình duyệt chuẩn bị animation cần thiết trước khi nó thực sự bắt đầu:
<div class="overflow-auto will-change-scroll"> <!-- ... --></div>Được khuyến nghị là bạn nên áp dụng các utility này ngay trước khi một phần tử thay đổi, và sau đó xóa nó ngay sau khi hoàn thành bằng cách sử dụng will-change-auto.
Thuộc tính will-change được dự định sử dụng như một giải pháp cuối cùng khi xử lý các vấn đề hiệu suất đã biết. Tránh sử dụng các utility này quá nhiều, hoặc chỉ đơn giản là dự đoán các vấn đề hiệu suất, vì nó thực sự có thể khiến trang kém hiệu suất hơn.
Use the will-change-[<value>] syntax to set the will-change property based on a completely custom value:
<div class="will-change-[top,left] ..."> <!-- ... --></div>For CSS variables, you can also use the will-change-(<custom-property>) syntax:
<div class="will-change-(--my-properties) ..."> <!-- ... --></div>This is just a shorthand for will-change-[var(<custom-property>)] that adds the var() function for you automatically.