This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    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.

    Code

    Code

    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
    Transcript

    Transcript

    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.

    Discuss

    Discuss