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.

<template>



    <div class=tom-layout>

        <navBar class=z-depth-0></navBar>

        <div class=content-layout>

            <transition name=fade>

                <router-view></router-view>

            </transition>

        </div>

    </div>



</template>



<script>

    import NavBar from './components/NavBar.vue';



    export default {

        components: {

            navBar: NavBar

        }

    }



</script>



<style lang=scss>

    @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;

}