Как анимировать удаление/создание карточек?

Question

[Ragtime Kitty]

Привет.

Есть контейнер с минимальной и максимальной высотами. В контейнер можно добавлять карточки, которые могут быть с разной высотой. Карточки можно удалять.

С появлением/исчезанием самих карточек вроде все просто:
transform, opacity и таймаут на удаление.

Но как анимировать изменение высоты контейнера? Как перемещать сами карточки в зависимости от изменений этой высоты? Прибавлять к высоте контейнера высоту добавляемой карточки?

Т.е. есть вот такое:


Хочу сделать примерно вот такое:


Как вообще подобное сделать? Можно ли без подсчета пикселей в js?

Подскажите, пожалуйста.

Comments

[Rustam Bainazarov]

JS-подход. Высота анимируется только когда её значение меняется из разряда 100px —> 23px.

Можно сначала анимацией на translate + прозрачность, потом менять высоту элемента до нуля (а-ля slideToggle), ну и после этого удалять из DOM.

[Ragtime Kitty]

Рустам Байназаров, а как добавление в таком случае анимировать?

[Сергей delphinpro]

Ragtime Kitty, точно так же.
Генерим блок, ставим стили трансформации, полную прозрачность и нулевую высоту.
Вставляем в нужное место.
Анимируем высоту.
После того как высота будет готова, анимируем opacity и transform

[Ragtime Kitty]

Сергей delphinpro, высота auto и заранее не известна. Где ее взять?

[Сергей delphinpro]

Ragtime Kitty, создать элемент, вставить в страницу (полностью прозрачным и абсолютом), прочитать getBoundingClientRect(), получить высоту (rect.bottom - rect.top), установить высоту в ноль, убрать абсолют и далее, как писал выше.