title: Vue/CSS, how to make a smooth height transition between two alternating elements (Fiddle included)
body: <p>I'm trying to make two elements that alternate on an opposing v-show predicate to transition between themselves in terms of height, but I'm unable to find a good solution for this. 
  This may be a bit elementary, but I'm inexperienced with transitions/animations, and I can't find any good examples to guide me here.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="app"&gt;
  
    &lt;div class="history"&gt;
      &lt;p&gt;
      How to make the green bordered area transition smoothly between different height in states A and B?
      &lt;/p&gt;
      &lt;div class="placeholder-content"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="interaction"&gt;
      &lt;button @click="(show_A ? show_A = false : show_A = true);"&gt;
        Cycle states
      &lt;/button&gt;
  
      &lt;transition name="swap"&gt;
      &lt;div v-show="show_A" class="interaction-A"&gt; A &lt;/div&gt;
      &lt;/transition&gt;
  
      &lt;transition name="swap"&gt;
      &lt;div v-show="!show_A" class="interaction-B"&gt; B &lt;/div&gt;
      &lt;/transition&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.swap-enter{
  }
  .swap-leave-to{
  }
  .swap-enter-active{
  }
  .swap-leave-active{
  }
  .swap-move{
  }
  </code></pre>
  
  <p>I've formulated the problem in a fiddle:</p>
  
  <p><a href="https://fiddle.jshell.net/jensmtg/7zun5c9f/" rel="noreferrer">https://fiddle.jshell.net/jensmtg/7zun5c9f/</a></p>