El objetivo de esta lección es añadir fluidez a nuestra interfaz.

Para ello vamos a hacer uso de las transiciones Vue, estas nos permiten animar la aparición y desaparición de elementos con la directiva v-if.

El primer lugar donde implementar el componente transition-group estos ajustes es en la zona donde mostramos los favoritos.

<!-- Favorites -->
<transition-group name="list">
    <div class="favorite" v-for="favorite in allFavorites" :key="favorite.id">
       ...
    </div>
</transition-group>

Necesitaremos también añadir selectores CSS apropiados para esta transición llamada list.

.list-move, /* apply transition to moving elements */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* ensure leaving items are taken out of layout flow so that moving
   animations can be calculated correctly. */
.list-leave-active {
  position: absolute;
}

Para finalizar nos queda animar la aparición y desaparición de la zona donde se muestran los resultados de la búsqueda. En este caso usaremos transition en lugar de transition-group⁣, ya que no se trata de una lista.

<!-- Result -->
<Transition>
    <div class="result" v-if="result">
      ...
    </div>
</Transition>

Por supuesto, también necesitamos el código CSS adecuado. Como no hemos definido un nombre para la transición, podemos utilizar el nombre por defecto.

.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

Y con tan poco esfuerzo hemos conseguido añadir transiciones a nuestra pequeña aplicación 😃.

Enlaces

Código inicial Código final
Curso Vue en Escuela Vue

¿Tienes alguna pregunta sobre esta lección de Vue 3 desde cero?

Resuelve todas tus dudas sobre Vue 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 📬