Aplica suaves transiciones entre elementos HTML no/visibles en Vue 3 con el v-if

▶

Con Vue, podemos realizar todo tipo de desarrollos lo cual incluye, poder mostrar contenido, contenido que podemos mostrar con suaves transiciones de todo tipo en donde lo que podamos hacer con CSS es el límite.

El ejemplo queda como:

<transition name="fade-slide">
   <div class="mycard-primary mb-5 block max-w-96" v-if="CONDITION">
       <div class="mycard-body">
           <h3 class="text-xl mb-3 ml-4">Add this item</h3>
           <cart-item :post="post" />
       </div>
   </div>
</transition>
***
<style>
.fade-slide-enter-active,
.fade-slide-leave-active {
   transition: all 0.4s ease;
}

.fade-slide-enter-from,
.fade-slide-leave-to {
   opacity: 0;
   transform: translateY(20px);
}

.fade-slide-enter-to,
.fade-slide-leave-from {
   opacity: 1;
   transform: translateY(0);
}
</style>

En mi blog tengo mucho material sobre Animaciones y Transiciones en CCS pero estas como quien dice son las reglas.

La condición -CONDITION- especifica cuando se oculta o muestra el elemento y en base a la transición que estamos implementando, el como se va a mostrar y ocultar.

Las transiciones en Vue son muy sencillas, al elemento HTML usamos la etiqueta transition con un nombre (en este ejemplo el de fade-slide) y para el CSS definimos clases que empleen como prefio el nombre de la etiqueta transition y sufijos como, el de -enter-active y -leave-active para indicar el comportamiento cuando mostramos/ocultamos el elemento HTML.

El resto de las clases, son para especificar el comportamiento de cuando se muestra u oculta.