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

5 votes313 views1 answer
Css negative padding
CSS
22 votes314 views5 answers
Grid center css
CSS
-4 votes302 views2 answers
Full width page css
CSS
0 vote297 views1 answer
Flex box divs squeeze together
CSS
0 vote287 views1 answer
How to change textsize recta native
CSS
4 votes284 views1 answer
Change hex background opacity css
CSS
0 vote305 views1 answer
Mathjax beautiful math in all browsers
CSS
0 vote317 views1 answer
Remove double quotes from string kotlin
CSS
2 votes345 views2 answers
Stop process id powershell
CSS
180 votes500 views6 answers
How to import a css file in html
CSS