Как добавить плавный переход с коллапсом Vue на V-if ⇐ CSS

[Anonymous]

Я борюсь с переходами VUE, пытаясь показать/скрыть контент, используя V-IF плавно. Пока я понимаю классы CSS и переходы, я могу сделать контент «плавно», используя такие вещи, как непрозрачность или перевод и т. Д., Но как только анимация завершена (или, скорее, с начала), любые разделы HTML ниже, кажется, «подпрыгнут». https://getbootstrap.com/docs/4.0/components/collapse/
Как появляется/исчезает скрытый раздел, все содержимое HTML 'Slides' хорошо с ним. Все образцы на документах Vue Transitions, в то же время имея отличные эффекты перехода CSS, имеют приведенный ниже html 'Jump', как только переход начался или завершен. С Vue: https://jsfiddle.net/wideboy32/eywraw8t/303737/
.smooth-enter-active, .smooth-leave-active {
transition: max-height .5s;
}
.smooth-enter, .smooth-leave-to {
max-height: 0 .5s;
}


Подробнее здесь: https://stackoverflow.com/questions/520 ... on-on-v-if