Vue 3 desde cero

Transiciones con Vue 3

Aprende a realizar transiciones y animaciones con Vue3 y sus componentes transition y transition-group


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.

HTML
<!-- 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.

CSS
.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.

HTML
<!-- 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.

CSS
.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

Juan Andrés Núñez
Juan Andrés Núñez
Ingeniero Frontend Senior. Especialista en Vue.js. Speaker. Docente profesional. Estoico.