我想在子路由之间创建一个非常简单的 nuxt 过渡。
结构是：
index.vue
index
--one.vue
--two.vue
--three.vue
索引.vue：
<template>
<div>
<nuxt-link to="/one">one</nuxt-link>
<nuxt-link to="/two">two</nuxt-link>
<nuxt-link to="/three">three</nuxt-link>
<nuxt-child :key="$route.fullPath"></nuxt-child>
</div>
</template>
<script>
export default {
transition: 'fade',
data(){
return {
}
},
}
</script>
<style scoped>
.fade-enter-active, .fade-leave-active{
transition: all 1s;
}
.fade-enter, .fade-leave-to{
opacity: 0;
}
.fade-leave, .fade-enter-to{
opacity: 1;
}
</style>
子组件：
一.vue：
<template>
<div>
1
</div>
</template>
二.vue
<template>
<div>
2
</div>
</template>
三.vue
<template>
<div>
3
</div>
</template>
问题是：
什么都没有发生！当我改变路线时，它们的变化方式就像没有过渡一样。
我做了什么：
我试图完全按照 nuxt 文档所说的去做。
我也搜索了很多关于它的内容，但不幸的是，没有一个类似的问题得到回答。