title: VueJS - Transition not working
body: <p>I'm trying to apply a transition whether a component has to be shown or not.
  I'm wondering why this simple example is not working: <a href="http://jsfiddle.net/bf830qoq/" rel="nofollow noreferrer">http://jsfiddle.net/bf830qoq/</a></p>
  
  <h2>Javascript</h2>
  
  <pre><code>Vue.component('loading', {
    template: '#loading-template',
  });
  
  new Vue({
    el: '#app',
    data: {
      showLoging: false
    }
  });
  </code></pre>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;script type="x/template" id="loading-template"&gt;
      &lt;transition="slide-fade"&gt;
      &lt;div&gt;Loading&lt;/div&gt;
      &lt;/transition&gt;
  &lt;/script&gt;
  
  &lt;!-- app --&gt;
  &lt;div id="app"&gt;
      &lt;loading v-if='showLoging'&gt;&lt;/loading&gt;
      &lt;button id="show-login" @click="showLoging = !showLoging"&gt;Show&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>.slide-fade-enter-active {
    transition: all .3s ease;
  }
  .slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active for &lt;2.1.8 */ {
    transform: translateX(10px);
    opacity: 0;
  }
  </code></pre>