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

• https://vuejs.org/guide/built-ins/transition.html
• https://vuejs.org/guide/built-ins/transition-group.html
• https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Optional_chaining