Интерактивность
Утилиты для оптимизации предстоящих анимаций элементов, которые ожидается изменятся.
| 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>; |
Используйте утилиты will-change-scroll, will-change-contents и will-change-transform для оптимизации элемента, который ожидается изменится в ближайшем будущем, инструктируя браузер подготовить необходимую анимацию до того, как она фактически начнется:
<div class="overflow-auto will-change-scroll"> <!-- ... --></div>Рекомендуется применять эти утилиты непосредственно перед изменением элемента, а затем удалять их вскоре после завершения, используя will-change-auto.
Свойство will-change предназначено для использования в качестве последнего средства при работе с известными проблемами производительности. Избегайте использования этих утилит слишком часто или просто в ожидании проблем с производительностью, так как это может фактически сделать страницу менее производительной.
Используйте синтаксис will-change-[<value>] , чтобы задать will-change property на основе полностью пользовательского значения:
<div class="will-change-[top,left] ..."> <!-- ... --></div>Для переменных CSS вы также можете использовать синтаксис: will-change-(<custom-property>)
<div class="will-change-(--my-properties) ..."> <!-- ... --></div>Это просто сокращение, will-change-[var(<custom-property>)] которое автоматически добавляет функцию var().