Общая проблема с чистой анимацией CSS заключается в анимировании высоты (или ширины) элементов, размеры которых неизвестны. Есть много «хакерских» способов, которые делают это хуже или лучше, например, установка max-height на 99⁶⁴ пикселей или требует установки начальной высоты на 0 и т. д., но они не решают проблему.
Представьте, что у вас есть требование реализовать некоторый динамический контент, загружаемый, например, из API и отображаемый в контейнере, высота которого должна анимироваться при изменении контента. Начальная высота не зафиксирована в CSS (установлено значение auto), и контейнер должен расширяться или сворачиваться с анимацией в соответствии с входящим содержимым. Итак, в основном вам нужно перейти от height: auto к height: auto. Браузеры не поддерживают такое поведение, но мы можем немного поколдовать с JS, чтобы добиться очень похожего результата, используя ResizeObserver и классические переходы CSS.
Пример ниже показывает простую реализацию решения в библиотеке React:
https://codesandbox.io/embed/eloquent-haslett-wqzp8?fontsize=14&hidenavigation=1&theme=dark
Краткое описание того, что я сделал здесь.
Во-первых, нам нужен элемент ref to HTML, который будет анимирован. Далее я зарегистрировал наблюдатель, который вызывает обратный вызов при изменении размера элемента. Начальная высота сохраняется в переменной previousHeight. Когда содержимое изменяется, обратный вызов вызывается с новой высотой. Я установил старую высоту для элемента и установил новую в кадре анимации следующего окна, чтобы у меня был типичный переход от X пикселей к Y пикселей. После перехода восстанавливаю «авто» высоту и сажусь на новую высоту как на предыдущую.
Код, вероятно, можно улучшить, потому что, честно говоря, я начал писать эту статью после того, как добился всех целей, которые хотел от нее, и я не тестировал ее в каких-то экстремальных ситуациях.
С уважением
