title: Smooth vue collapse transition on v-if
body: <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>