Nuxt page transition

.layout-enter-active,
.page-enter-active,
.layout-leave-active,
.page-leave-active {
    transition: opacity 400ms, transform 400ms;
}

.layout-enter,
.page-enter {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
}

.layout-enter-to,
.page-enter-to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.layout-leave,
.page-leave {
    opacity: 1;
}

.layout-leave-to,
.page-leave-to {
    opacity: 0;
}

Source: nuxtjs.org

Similar codes

-1 vote146 views1 answer
How to use a blank space with grid template areas css
CSS
0 vote135 views1 answer
Tailwindcss tutorial
CSS
0 vote132 views1 answer
Css add space right
CSS
0 vote139 views1 answer
Css chamfered corner
CSS
-1 vote143 views1 answer
Tailwindcss top
CSS
1 vote146 views1 answer
Css grid minmax function
CSS
0 vote137 views1 answer
Hover media query
CSS
64 votes124 views6 answers
Center image html
CSS
47 votes145 views6 answers
Css blur
CSS
0 vote140 views1 answer
Css bottom:0 isnt the bottom of the page
CSS