Грядут перемены
#Фронтенд

Сложно представить современный веб интерфейс без анимаций. И я сейчас не говорю о свистелках-перделках, а я о самых простых, заскейлить, прозрачность добавить, цвет поменять и тд. Но почему-то некоторые анимации работают плавно, а некоторые нет. Хм… очень странно, ведь для анимации изменений всех этих свойств мы используем один инструмент - transition.

Секрет заключается в том, что анимация разных свойств имеет разную производительность, разное количество слоев затрагивается. Анимировать opacity или анимировать height, совсем разные вещи.

Как решать эту проблему? Использовать transform. Да в некоторых ситуациях это поможет, но transform покроет не все кейсы.

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

Но! Нельзя навешивать will-change на все без разбора, тк слишком обильное использование может ухудшить производительность.

Как тогда быть? Где мера?

Есть один лайфхак- вешать это свойство динамически. Но! Если вы повесите его при наведении на элемент, на котором при наведении нужна анимация эффекта не будет. А вот если повесить его на элемент тогда, когда вы заходите мышкой в блок, в котором этот элемент расположен, то будет лучше. Важно, контейнер не должен 1 в 1 повторять размеры элемента, иначе нет смысла, в этом случае стоит найти блок побольше. Таким образом браузер будет готовиться к изменению свойства только тогда, когда пользователь будет близок к этому элементу, а не находится совсем в другой части страницы.

Такой подход позволит не просадить ваш интерфейс, все будет работать плавно.