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

0 vote123 views1 answer
Dropdown dropdown-user nav-item work on 2 clicks
CSS
3 votes103 views1 answer
Rotate icon on click css
CSS
0 vote132 views1 answer
Ul or ol with no indent
CSS
27 votes131 views4 answers
How to import fonts css
CSS
0 vote135 views1 answer
Col
CSS
2 votes126 views1 answer
Js confirm yes no before delete
CSS
0 vote161 views2 answers
Create react app tailwind css with yarn
CSS
3 votes141 views3 answers
How to change text on hover css
CSS
1 vote116 views1 answer
Restrict flex items in a row
CSS
0 vote127 views1 answer
In flex-wrap remove last item margin for every row
CSS