How to Use Vue Transitions and Animations

Vue's built-in <Transition> and <TransitionGroup> make adding CSS and JS animations to your app straightforward.

Step 1 — Basic Fade Transition

<template>
  <button @click="show = !show">Toggle</button>

  <Transition name="fade">
    <p v-if="show">Hello, I fade in and out!</p>
  </Transition>
</template>

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

Step 2 — Slide + Fade

.slide-enter-active { transition: all 0.3s ease-out; }
.slide-leave-active { transition: all 0.2s ease-in; }
.slide-enter-from   { transform: translateY(-20px); opacity: 0; }
.slide-leave-to     { transform: translateY(10px);  opacity: 0; }

Step 3 — TransitionGroup for Lists

<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item.id">
    {{ item.name }}
    <button @click="remove(item.id)">✕</button>
  </li>
</TransitionGroup>

<style>
.list-enter-active, .list-leave-active { transition: all 0.4s ease; }
.list-enter-from, .list-leave-to       { opacity: 0; transform: translateX(-30px); }
/* Animate other items moving into place */
.list-move { transition: transform 0.4s ease; }
</style>

Step 4 — Route Transitions

<!-- App.vue -->
<RouterView v-slot="{ Component }">
  <Transition name="page" mode="out-in">
    <component :is="Component" :key="$route.path" />
  </Transition>
</RouterView>

<style>
.page-enter-active, .page-leave-active { transition: opacity 0.2s; }
.page-enter-from,   .page-leave-to     { opacity: 0; }
</style>