nuxt如何实现全局基于路由的动态过渡的配置？

Question

问题描述

vue-router里基于路由的动态过渡的配置类似于这样，

看到nuxt文档，好像是<transtion>组件才能用。
那我能在nuxt.config.js全局配置根据to/from然后区分过渡效果吗？我不希望每个页面都写transtion钩子函数。

问题出现的环境背景及自己尝试过哪些方法

自己尝试想过在middleware里使用，但是不知道怎么把class注入。

Answer 1

在nuxt.config.js文件中配置
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.测试,需要两个页面,然后从一个页面点击链接跳转到另外一个页面,即可看到效果。

当然你可以可以添加更加炫的过渡效果,这里针对的是所有的页面切换。