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

2 votes181 views1 answer
Transition syntax css
CSS
0 vote179 views2 answers
Box-shadow: 0px 4px 8px rgba(164, 188, 223, 0.15);
CSS
70 votes189 views6 answers
Center in css
CSS
32 votes190 views6 answers
@font-face in css
CSS
0 vote200 views1 answer
Éviter que l'on découvre l'identifiant d'un auteur
CSS
1 vote182 views1 answer
Css button:focus border-radius square
CSS
1 vote188 views1 answer
Stop the client from scrolling
CSS
1 vote176 views1 answer
Css validator
CSS
9 votes202 views3 answers
Fix textarea size
CSS
0 vote189 views1 answer
Test typescript
CSS