title: VueJS transitions using v-view
body: <p>I'm looking to animate the appearance of new elements and the disappearance of old elements when you change the component a v-view element is bound to. However because changing the ViewModel actually destroys the DOM element, this doesn't seem to work (the boxes are supposed to fade/shrink when they disappear):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var vm = new Vue({
    el: "#container",
    data: {
      currentView: ""
    }
  });
  
  Vue.component("red", {
    template: "&lt;div class='red box' v-transition&gt;&lt;/div&gt;"
  });
  Vue.component("blue", {
    template: "&lt;div class='blue box' v-transition&gt;&lt;/div&gt;"
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.red {
    background-color: red;
  }
  .blue {
    background-color: blue;
  }
  .box {
    transition: all 3s ease;
    height: 200px;
    width: 200px;
    opacity: 1;
  }
  .box.v-enter,
  .box.v-leave {
    height: 0;
    width: 0;
    opacity: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.10.6/vue.min.js"&gt;&lt;/script&gt;
  &lt;div id="container"&gt;
    &lt;button v-on="click: currentView = 'red'"&gt;Red&lt;/button&gt;
    &lt;button v-on="click: currentView = 'blue'"&gt;Blue&lt;/button&gt;
    &lt;div v-view="currentView"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there any native VueJS method of making this animation work?</p>