title: Transition elements below a transitioned v-if
body: <p>I have two elements, and the top one's visibility is controlled by a <code>v-if</code> on a simple boolean.</p>
  <pre><code>transition(name=&quot;fade&quot;)
      #element1(v-if=&quot;showFirst&quot;)
          p Foo
  
  #element2
      p Bar
  </code></pre>
  <p>The first element is wrapped in a <code>&lt;transition&gt;</code> tag, exactly as per the <a href="https://v2.vuejs.org/v2/guide/transitions.html#Transitioning-Single-Elements-Components" rel="nofollow noreferrer">Vue documentation</a>.</p>
  <p>However, while this does create a fading animation, the rest of the content on the page still jumps very jarringly.</p>
  <p>How can I create a transition that will also smoothly transform the position of any and all siblings that follow?</p>
  <p>A <a href="https://jsfiddle.net/bjfhth7c/2/" rel="nofollow noreferrer">fiddle</a> demoing this issue.</p>