Как сделать плавное увеличение/уменьшение высоты в зависимости от отображения контента vue?

Question

[alaskafx]

Вот, к примеру пен, как я могу сделать так, чтобы высота родительского блока плавно увеличивалась и уменьшалась при скрытии/отображении контента?

Answer 1

[Aetae]

Элементарно, вот те на коленке накидал:


Только он не учитывает кучу всяких edge-case, самое очевидное: изменения ширины в процессе работы - следует добавить ещё обёртку и ResizeObserver.
Но и не очевидных там много, потому для таких вещей обычно используют готовые либы.)

Comments

[alaskafx]

Спасибо, а можете подсказать такие библиотеки?

[Aetae]

alaskafx, https://www.google.com/search?q=vue+expansion
Я юзаю те, что идут с той библиотекой с которой я сейчас работаю(такой компонент есть в каждой).)
Без библиотеки компонентов\фреймворка смысла особо нет самому фигачить, как по мне, лишние телодвижения.

[alaskafx]

Aetae, Понял, спасибо

Answer 2

[Andrew]

Во Vue есть анимации.
Используйте их https://ru.vuejs.org/v2/guide/transitions.html

Comments

[alaskafx]

Это вообще ответ не в тему.

Про transition знаю.
Тогда, покажите мне в песочнице пример того, что хочу я, только с transition.

[Andrew]

Вот пример - https://jsfiddle.net/Shatge/udkj1L82/6

alaskafx

[alaskafx]

Andrew, Приношу извинения, зря быканул

[Andrew]

alaskafx, и либы тут никакие не нужны. Это один из самых простых компонентов.

Все ок. =)