Transition

Vue menyediakan komponen <Transition> untuk animasi enter/leave:

const show = ref(true)

---template---
<button @click="show = !show">Toggle</button>
<Transition name="fade">
  <p v-if="show" id="animated">Animated!</p>
</Transition>

CSS yang dibutuhkan:

.fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }
.fade-enter-from, .fade-leave-to { opacity: 0; }

TransitionGroup untuk List

---template---
<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item">{{ item }}</li>
</TransitionGroup>