CSS-свойство will-change: как использовать

11 мая, 2022 12:41 пп 187 views | Комментариев нет

| | Комментировать запись

Часто CSS-свойство will-change неправильно понимают и используют. В этом коротком мануале мы разберем это свойство, чтобы в будущем вы смогли сделать свои CSS-анимации и переходы максимально эффективными.

Что такое will-change?

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

К примеру, если бы мы применяли transform к элементу, мы могли бы сообщить об этом браузеру следующим образом:

will-change: transform;

Можно также объявить и несколько значений:

will-change: transform, opacity;

Значения will-change

Свойство will-change принимает 4 значения:

  • auto —  браузер применит оптимизацию.
  • scroll-position — указывает, что в ближайшем будущем автор собирается анимировать или изменить положение прокрутки элемента.
  • contents — указывает на то, что автор собирается анимировать или изменить что-то в содержимом элемента.
  • custom-indent — сообщает, что в ближайшем будущем автор собирается анимировать или изменить свойство с заданным именем элемента.

Значения, на которых мы собираемся сосредоточиться, — это custom-indent, то есть transform, opacity и т.п.

Когда использовать will-change?

Как утверждает MDN Mozilla, will-change следует использовать только в крайнем случае.

Злоупотребление свойством will-change приводит к снижению производительности, а это полная противоположность тому, чего мы хотим. Если ваши анимации/переходы и так плавные и четкие, использовать will-change нет необходимости. Браузер справляется с оптимизацией без помощи will-change.

Ошибки применения will-change

Распространенная ошибка, которую допускают при использовании will-change, заключается вот в чем:

.my-element:hover {
  will-change: opacity;
  transition: opacity .25s ease-in-out;
}

Это приносит больше вреда, чем пользы: will-change относится к будущему, поэтому во время анимации его не следует применять.

Лучше было бы поместить will-change в родительский элемент my-element следующим образом:

.parent-element:hover {
  will-change: opacity;
}

.my-element:hover {
  transition: opacity .25s ease-in-out;
}

Так браузер будет заранее знать, что нужно оптимизировать для этого изменения. Помните: используйте это свойство в крайнем случае, только если ваши анимации дергаются или мерцают.

Удаление will-change

Mozilla рекомендует удалить свойство will-change после изменения элемента. Вот почему также рекомендуется применять will-change через JavaScript, чтобы его можно было удалить. Если значение will-change установлено в таблице стилей CSS, его нельзя удалить.

С точки зрения кода это довольно просто. Выглядит это так:

const el = document.querySelector('.parent-element')
el.addEventListener('mouseenter', addWillChange)
el.addEventListener('animationend', removeChange)

const addWillChange = () => {
  this.style.willChange = 'opacity'
}

const removeChange = () => {
  this.style.willChange = 'auto'
}

Приведенный выше код очень прост: мы добавляем will-change в parent-element при наведении курсора, а затем при запуске события animationend удаляем это свойство.

Вписывать will-change в таблицу стилей может иметь смысл в некоторых обстоятельствах. Например, так лучше сделать, если с элементом, вероятно, будут взаимодействовать несколько раз, иначе на кнопке или боковой панели может быть что-то вроде эффекта ряби. Как правило, в таблице стилей допустимо иметь пару свойств will-change, остальные в идеале должны быть установлены с помощью JavaScript.

Итоги

Этот мануал – лишь краткое введение в использование will-change. Если вы хотите исследовать эту тему глубже, настоятельно рекомендуем вам ознакомиться с этой статьей.

Читайте также: Как работает CSS-свойство vertical-align

Tags:

Добавить комментарий