How to use transitions in Vue.js for animation?

Vue provides the <transition> component for adding transition effects to elements when they are inserted, updated, or removed from the DOM.

<template>
  <transition name="fade">
    <p v-if="show">This will fade in and out</p>
  </transition>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

In this example, the element will smoothly fade in and out when the show variable changes.