Apply smooth transitions between non/visible HTML elements in Vue 3 with v-if

▶

With Vue, we can perform all kinds of developments, including displaying content with smooth transitions of all kinds, where what we can do with CSS is the limit.

The example looks like this:

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

I have a lot of material on my blog about Animations and Transitions in CCS, but these are, so to speak, the rules.

The "CONDITION" condition specifies when the element is hidden or shown, and based on the transition we're implementing, how it will be shown and hidden.

Transitions in Vue are very simple. For the HTML element, we use the transition tag with a name (in this example, fade-slide), and for the CSS, we define classes that use the transition tag name as a prefix and suffixes like "-enter-active" and "-leave-active" to indicate the behavior when we show/hide the HTML element.

The rest of the classes are used to specify the behavior when it is shown or hidden.