Can't get Vue.js CSS transition to work?
<p>Documentation for CSS transitions can be found <a href="https://vuejs.org/guide/transitions.html" rel="nofollow">here</a>.</p>

<p>Pretty sure I set up my JSFiddle exactly how it needs to be set up for the transition to work. Not entirely certain because imo the documentation is a little light on CSS transitions. </p>

<p>Have some very basic HTML/CSS I was hoping would enable Vue.js to create a nice fade effect:</p>

<p>CSS:</p>

<pre><code>.fade-transition {
  opacity: 1;
  transition: all .45s linear;
}

.fade-enter, .fade-leave {
  opacity: 0;
}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div class="loading-overlay" v-if="loading" v-transition="fade"&gt;
  In 5 seconds, this overlay should fade out...
&lt;/div&gt;  
</code></pre>

<p>However, it doesn't seem to be working. Any advice? </p>

<p><a href="https://jsfiddle.net/4qpkft43/1/" rel="nofollow">JSFiddle</a></p>