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