Подготовка к изменениям

Классы will-change-* задают свойство will-change: браузер заранее готовит элемент к изменению трансформации, прокрутки или содержимого — например, выносит его в отдельный слой. Берите их для анимации, которая заметно подтормаживает без подсказки.

Пример

Наведите указатель на плитки: обе увеличиваются одинаково. Подсказка will-change-transform не меняет вид, она меняет то, как браузер готовит отрисовку.

<div class="grid grid-col-1 sm:grid-col-2 gap-4">
  <div class="flex flex-col gap-1 items-start">
    <div class="will-change-transform transition-transform duration-slow hover:scale-3 p-3 radius-ui bg-primary-container color-on-primary-container">Наведите указатель</div>
    <code class="text-1/2 color-on-surface-variant">will-change-transform</code>
  </div>
  <div class="flex flex-col gap-1 items-start">
    <div class="will-change-auto transition-transform duration-slow hover:scale-3 p-3 radius-ui bg-surface-container color-on-surface">Наведите указатель</div>
    <code class="text-1/2 color-on-surface-variant">will-change-auto</code>
  </div>
</div>

Классы

Условия (что это): ширина экрана — нет; состояния — нет.

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Применение

<div class="will-change-transform transition-transform hover:scale-3">…</div>

Подсказку ставят только тем элементам, анимация которых тормозит, и снимают классом will-change-auto после неё, если элемент долго остаётся на экране.

Ограничения

• Каждый подготовленный элемент занимает память видеокарты. Подсказка на многих элементах сразу замедляет страницу.
• will-change-transform создаёт контекст наложения и блок для позиционирования: потомок с fixed позиционируется относительно элемента, а не окна, и z-* потомков сравниваются внутри элемента.
• Префиксов ширины экрана и состояния у семейства нет.

См. также

• Масштабирование
• Общее свойство перехода