vue.js设置路由跳转时动画效果

app.vue :

<template>
    <div>
        <router-link :to="/login">Login in </router-link>
        <router-link :to="/homePage">to HomePage</router-link>
        <!- 设置名称 ->
        <transition name="fade">
            <router-view />
        </transition>
    </div>
</template>
<script>
</script>
<style scoped>
/* 为对应的路由跳转时设置动画效果 */
.fade-enter-active, .fade-leave-avtive {
    transition: opacity .5s
}
.fade-enter, .fade-leave-to {
    opacity: 0
}

</style>