title: Vue: Using Vue Transitions with v-if/else?
body: <p>I have components structured like this:</p>
  <pre><code>   &lt;component-1 
         v-if=&quot;this.showData&quot;
      &gt;&lt;/component-1&gt;
      
      &lt;component-2
         v-else
      &gt;&lt;/compoment-2&gt;
  </code></pre>
  <p>I would like to wrap a transition around each one.  Is my only option explicitly dropping the <code>v-else</code> and checking <code>&quot;v-if=&quot;!this.showData&quot;</code> like:</p>
  <pre><code>   &lt;transition name=&quot;fade&gt;
        &lt;component-1 
            v-if=&quot;this.showData&quot;
         &gt;&lt;/component-1&gt;
     &lt;/transition&gt;
      
     &lt;transition name=&quot;fade&gt;
        &lt;component-2 
            v-if=&quot;!this.showData&quot;
         &gt;&lt;/component-1&gt;
     &lt;/transition&gt;
  </code></pre>
  <p>or is there another way I can keep my v-if/else -- it just feels cleaner to me.</p>