How does nuxt implement the configuration of a global route-based dynamic transition?

problem description

The configuration of dynamic route-based transitions in

vue-router is similar to this,
clipboard.png

nuxt
nuxt.config.jsto/fromtranstion
clipboard.png

the environmental background of the problems and what methods you have tried

I have tried to use it in middleware, but I don"t know how to inject class.

Apr.21,2022

configure
1 in the nuxt.config.js file. Create a page-transletion.css file in the / assert directory that contains the transition animation content as follows:

.page-enter-active, .page-leave-active {
 transition: opacity .5s; 
} 
.page-enter, .page-leave-active { 
opacity: 0; 
} 

2. Configure in nuxt.config.js:

css: ['assets/page-transletion.css']

3. To test, you need two pages, and then click a link from one page to jump to another page to see the effect.

of course you can add a cooler transition effect, which is for all page switches.

Menu