Сэм Торогуд из Google рассказал о том, как реализовать аккордеон, который будет работать плавно даже на слабых устройствах — "How I Learnt To Stop Worrying And Love Animating The Box Model".
В статье разбирается два метода создания аккордеонов: с изменением высоты внешнего блока и с помощью хака с отрицательным отступом. Любая реализация аккордеона с нефиксированной высотой приводит к сдвигу элементов страницы после аккордеона. Этот сдвиг вызывает перерисовки блоков. Если страница очень сложная или если она работает на слабом устройстве, то такие перерисовки приводят к лагам.
Для решения этой проблемы нужно вынести сдвигаемые элементы в отдельный слой рендеринга с помощью свойства
will-change. Чтобы зря не тратить ресурсы (страница с большим количеством слоёв потребляет больше памяти), можно устанавливать will-change перед началом анимации и удалять после завершения.Полезная статья. Рекомендую почитать всем, кто разрабатывает интерфейсы.
#performance #css
https://whistlr.info/2021/box-model-animation/