Adding page transitions to our Nuxt.js app

As we learned in Chapter 6, Transitions and Animations, Vue comes with a wide array of ways to add interactivity, transitions, and animations to our apps. To make this process faster, we will use animations from Animate.css, with some slight modifications.

In Nuxt, we can use page transition hooks just like we already learned. We'll simply replace the v letter inside the .v-* transition hooks with .page-*. All the functionality, and the way everything works, will stay the same.

Let's begin by opening the pages/index.vue file and adding this code at the top of its style tag:

.page-enter-active, .page-leave-active {
  transition: opacity 1s;
}
.page-enter, .page-leave-active {
  opacity: 0;
}

Next, we'll open the contact.vue file and add this code at the top of its style tag:

.page-enter-active {
    animation: zoomIn .5s;
} 
@keyframes zoomIn {
from {
    opacity: 0;
    transform: scale3d(0.4, 0.4, 0.4);
}

50% {
    opacity: 1;
}
}

.zoomIn {
animation...