• De igual forma que disponemos del componente transition en Vue, con Vue Router también podemos aplicar transiciones entre los cambios de ruta en nuestra aplicación.
  • Estas funcionan de igual forma que las que se usan en Vue.
  • Ya que las rutas se muestran en el componente router-view, podemos envolverlo con el componente transition y establecer sus atributos, como por ejemplo name.
<transition name="fade">
  <router-view />
</transition>
  • Y ahora crear las clases CSS para un desvanecimiento entre cada ruta.
.fade-enter-active,
.fade-leave-active {
  opacity: 1;
  transition: all 0.5s ease-in-out;
}

.fade-enter,
.fade-leave {
  opacity: 0;
}
  • Puedes hacer mucho más con las transiciones, te recomiendo que le eches un vistazo a la documentación oficial de Vue. Por ejemplo podemos crear transiciones diferentes para la entrada y la para salida.
.fade-enter-active {
  animation: fade 0.2s ease-in-out;
}

@keyframes fade {
  from {
    opacity: 0;
  }
  50% {
    opacity: 50%;
  }
  to {
    opacity: 1;
  }
}

.fade-leave-active {
  animation: slide 0.2s ease-in-out;
}

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-300px);
  }
}
  • Y establecer el atributo mode en el componente transition, para que esta la transición (que es diferente para la salida y para la entrada) funcione correctamente.
  • Como ves estas son transiciones globales, pero como se muestra en la documentación también se pueden añadir transiciones por ruta, estableciéndolas en cada componente o incluso transiciones dinámicas, es decir, diferentes por cada ruta/componente.
Storyblok: el primer CMS headless tanto para desarrolladores como para marketers

El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

Código inicial
Curso Vue Router en Escuela Vue

¿Tienes alguna pregunta sobre esta lección de Aprende a enrutar con Vue Router ?

Resuelve todas tus dudas sobre Vue Router en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.

Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬