1.在/assert目录下建立一个page-transletion.css文件,里面包含过渡动画内容,内容如下:
.page-enter-active, .page-leave-active {
transition: opacity
.5s;
}
.page-enter, .page-leave-active {
opacity:
0;
}
2.在nuxt.config.js中配置:
css: [
'assets/page-transletion.css'
]
3.测试,需要两个页面,然后从一个页面点击链接跳转到另外一个页面,即可看到效果。
当然你可以可以添加更加炫的过渡效果,这里针对的是所有的页面切换。
4.针对某个页面切换,在全局样式page-transletion.css文件中添加针对页面的过渡样式:
.test-enter-active, .test-leave-active {
transition: opacity
.5s;
}
.test-enter, .test-leave-active {
opacity:
0;
}
然后在需要添加指定页面的页面vue文件中添加:
export
default {
transition:
'test'
}
官方参考文档:https://zh.nuxtjs.org/guide/routing#过渡动效