title: Vue.js - Transitions between conditionals (v-if and v-else)
body: <p>Is there a way that you can use <code>transition</code> between vuejs conditionals <code>v-if</code> and <code>v-else</code>?</p>
  
  <p>As an example:</p>
  
  <pre><code>&lt;transition name="fade"&gt;
      &lt;p v-if="show"&gt;hello&lt;/p&gt;
      &lt;p v-else&gt;Goodbye&lt;/p&gt;
  &lt;/transition&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>new Vue({
     el: '#demo',
     data: {
         show: true
     }
  })
  </code></pre>
  
  <hr>
  
  <pre><code>.fade-enter-active,
  .fade-leave-active {
      transition: opacity .5s
   }
  
  .fade-enter,
  .fade-leave-active {
      opacity: 0
  }
  </code></pre>
  
  <p>I can't seem to get a <code>transition</code> to work in such a scenario, where, as you toggle <code>show</code>, the <code>&lt;p&gt;</code> elements use a <code>transition</code> between them.</p>
  
  <p><a href="https://jsfiddle.net/fbponh78" rel="noreferrer">https://jsfiddle.net/fbponh78</a></p>