Как сделать подобную фичу?

Question

[Umid]

Наткнулся на такую гифку.
Никак не могу поймать идею как сделать такое.
А точнее как сделать такой плавный переход (вниз, вверх).
Может данная фича имеет название?
Или есть статьи как сделать такое?

Answer 1

[Dark Hole]

Сам плавный переход - фигня, просто задержка.
А вот правильная реализация перетаскивания - не знаю.

Comments

[Umid]

что за задержка?

[Dark Hole]

Umid: jQuery.sleep(). Присмотрелся, там анимируются немного по-другому, но суть та же.

[Umid]

Причём тут вообще задержка, да ещё и на jquery. Я про манипуляцию DOM интересуюсь.

[Dark Hole]

Umid: эффект делается так - перемещающийся элемент реплэсится с помощью оболочки(это и так ясно). Оболочка уменьшается до 0, потом, по порядку анимируются margin-bottom с помощью задержки. Фидл сделать, шоль?

Answer 2

[Mysterion]

Слева обычный draggable список, который связан с блоками контента похожим образом. Посмотрите пример.

Comments

[Амир Алимжанов]

да, использовать draggable, а блокам например, если они на flexbox можно просто order меня)

[Umid]

Амир Алимжанов: Спасибо большое.

Answer 3

[Александр Таратин]

Никак.
Блоки с контентом не равного размера => нельзя однозначно предсказать на какие позиции их анимировать, пока перетаскиваемый блок не будет опущен.
То есть их движение не получится сделать равноускоренным.
Также они будут отставать в анимации от контролирующего блока.