Часто 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