Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Create CSS Transition Effects in Vue.js and Nuxt

    John LindquistJohn Lindquist

    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.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    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 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.