Smooth vue collapse transition on v-if : <p>I'm struggling with vue transitions trying to show / hide content using v-if smoothly.  Whilst I understand the css classes and transitions, I can make the content appear 'smoothly' using things like opacity or translation etc...but once the animation is complete (or rather as it starts), any html sections below seem to 'jump'.</p>

<p>I'm trying to achieve the same affect as the Bootstrap 4 'collapse' class - click one of the top buttons here: <a href="https://getbootstrap.com/docs/4.0/components/collapse/" rel="noreferrer">https://getbootstrap.com/docs/4.0/components/collapse/</a></p>

<p>As the hidden section appears / disappears, all the html content 'slides' nicely with it.</p>

<p>Is this possible using Vue transition for content being shown using v-if? All the samples on the vue transitions docs, whilst having great css transition effects, have the below html 'jump' once the transition has started or is complete.</p>

<p>I've seen some pure js solutions using max-height - <a href="https://jsfiddle.net/wideboy32/7ap15qq0/134/" rel="noreferrer">https://jsfiddle.net/wideboy32/7ap15qq0/134/</a></p>

<p>and tried with vue: <a href="https://jsfiddle.net/wideboy32/eywraw8t/303737/" rel="noreferrer">https://jsfiddle.net/wideboy32/eywraw8t/303737/</a></p>

<pre><code>.smooth-enter-active, .smooth-leave-active {
  transition: max-height .5s;
}
.smooth-enter, .smooth-leave-to {
  max-height: 0 .5s;
}
</code></pre>

<p>Thanks!</p>
