Create CSS Transition Effects in Vue.js and Nuxt
Adding a little flair to page transitions can help with the visual appeal of the app. This lesson walks you through using CSS transitions between pages to add a nice fade-in and fade-out page transition effect.
Tread page transitions, when we change pages start by adding a main CSS to our assets. Then, we'll include this main CSS in our config in our CSS property, so we'll say ~/assets/main.css.
Inside of this main CSS which is now included in our project, we define transitions by saying .page, enter end.page leave to, and we'll say something like transform, rotate 180 degrees. What this means is, when you enter a page, the page will start at the 180 degree rotation, and the page that's leaving will end at the 180 degree rotation, so basically from 180 to 180.
Now, we have to define a duration on this. We'll say, page enter dash active and page leave active. These are simply classes to apply to the page that's coming in and leaving, make in at a place to define your transition properties.
Say transition that's transformed, we'll say three seconds. All these applied, when I change pages over here, will show a go 180 and come back 180. Say jobs, I got a 180 and come back 180.
That's a bit ridiculous, so thus go ahead and change this to opacity zero and transition to opacity, make this lasts 0.5 seconds, and will have a much nicer page transition.