VueJs router-view transitions : <p>I am trying to create some transitions on my router-view components every time I click a new link. The problem is that only one of the fade animations will work. For example, it will fade out, but the new page will appear immediately like normal. Basically I can only have either an enter-active-class or a leave-active-class, but not both at the same time.</p>

<pre><code>&lt;template&gt;

    &lt;div class="tom-layout"&gt;
        &lt;navBar class="z-depth-0"&gt;&lt;/navBar&gt;
        &lt;div class="content-layout"&gt;
            &lt;transition name="fade"&gt;
                &lt;router-view&gt;&lt;/router-view&gt;
            &lt;/transition&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;/template&gt;

&lt;script&gt;
    import NavBar from './components/NavBar.vue';

    export default {
        components: {
            navBar: NavBar
        }
    }

&lt;/script&gt;

&lt;style lang="scss"&gt;
    @import url('https://fonts.googleapis.com/css?family=Ek+Mukta');

    body {

        overflow: hidden;

        .content-layout {
            margin-top: -64px;
            width: 100%;
            z-index: -5;
        }
    }   


.fade-enter {
    opacity: 0;
}

.fade-enter-active {
    transition: opacity 2s ease;
}

.fade-leave {

}

.fade-leave-active {
    transition: opacity 2s ease;
    opacity: 0;
}
</code></pre>
