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>