Есть блок со списком музыкальных групп, он скрывается и показывается при нажатии на гамбургер. Сам список состоит из названия и картинки, анимация делается добавлением css класса, в котором transition: all .6s ease-in-out; transform: translateX(-100%);
Если список небольшой, то все ок, но если там большое количество элементов, то анимация жутко тормозит.
Как бы вы решили эту проблему? Я ничего не придумал, кроме как прятать сам список до окончания анимации. То есть блок будет появляться и уезжать пустым, а после того как анимация завершится, в нем будет появляться сам список.
Может есть идеи лучше?
Полагаю, will-change: transform присутствует. Можно еще попробовать на время анимации добавлять к списку pointer-events: none, как в том хаке с плавным скроллом. Если не поможет, то стоит подумать о том, что из большого списка при движении в горизонтальном направлении часть групп не будет видна. Соответственно можно анимировать по отдельности те, которые видны (с небольшой задержкой у каждой следующей - как на ведроиде центр уведомлений очищается), а остальные (скрытые) просто вставлять в нужное место при завершении анимации у первых.
Простой
