Ragtime_Kitty
@Ragtime_Kitty

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

Привет.

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

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

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

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


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

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

Подскажите, пожалуйста.
  • Вопрос задан
  • 142 просмотра
Пригласить эксперта
Ответы на вопрос 1
l3ftoverz
@l3ftoverz Куратор тега JavaScript
Туды сюды
Можно ли без подсчета пикселей в js?

Можно.

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

Я так, на вид вижу это вообще CSS анимацией, где JS нужен только для того, что бы дать нужный класс блоку.

Причём варианта вижу где-то два, но они похожи в целом: берёшь и просто двигаешь блок анимацией в левую сторону или через позиционирование и left\right или margin'ои толкаешь его ща блок, по пути делая его всё больше прозрачным, а когда он уже уйдёт за блок - дать ему height: 0 или вообще вырезать из DOM через JS, остальные плавности обычным transition делаются.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы