Vue.js: Transitions & Animations

<!-- v-bind:name="fade" → the 6 classes are .fade-xxx -->
<Transition name="fade">...</Transition>

<!-- No name → defaults to v-xxx (the 6 classes are .v-xxx) -->
<Transition>...</Transition>

<!-- Dynamic name -->
<Transition :name="transitionName">...</Transition>

<!-- 1. Default mode: enter and leave happen at the same time (overlap) -->
<Transition name="fade">
  <div v-if="show">Content</div>
</Transition>

<!-- 2. out-in: leave first, then enter (recommended, avoids overlap) -->
<Transition name="fade" mode="out-in">
  <div v-if="show">Content</div>
</Transition>

<!-- 3. in-out: enter first, then leave (rarely used) -->
<Transition name="fade" mode="in-out">
  <div v-if="show">Content</div>
</Transition>

Both areas start on the green "Card A", and the button reads "Switch card (current A)".
After one click, the top area fades the old card out and the new one in at the same time — green and blue briefly overlap and the container height jumps.
The bottom `mode="out-in"` area waits ~0.5s for the green card to leave, then fades the blue "Card B" in; only one card is ever visible.
Clicking again switches back to A with the same visible difference.

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

.slide-enter-active, .slide-leave-active {
  transition: transform 0.3s;
}
.slide-enter-from {
  transform: translateX(-100%);
}
.slide-leave-to {
  transform: translateX(100%);
}

.scale-enter-active, .scale-leave-active {
  transition: transform 0.3s;
}
.scale-enter-from, .scale-leave-to {
  transform: scale(0);
}

.rotate-enter-active {
  transition: transform 1s;
}
.rotate-enter-from {
  transform: rotate(0deg);
}
.rotate-leave-active {
  animation: bounce 0.5s;
}
@keyframes bounce {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.combo-enter-active, .combo-leave-active {
  transition: all 0.3s;
}
.combo-enter-from {
  opacity: 0;
  transform: translateX(-50px) scale(0.8);
}
.combo-leave-to {
  opacity: 0;
  transform: translateX(50px) scale(0.8);
}

/* Applied automatically when an item changes position (e.g. reordering) */
.list-move {
  transition: transform 0.5s;
}

The list starts with 3 rows: Vue / Router / Pinia, each with a red × on the right.
"Add an item" fades the new row "Item 4" in and slides it from the right (0.5s); clicking again appends "Item 5".
Clicking a row's × fades that row out while the remaining rows slide up smoothly within 0.5s instead of jumping.
"Move first to bottom" glides the first row down to the end while the others shift up — a continuous motion, no teleporting.

<template>
  <Transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @before-leave="beforeLeave"
    @leave="leave"
    @after-leave="afterLeave"
    :css="false"  <!-- disable CSS classes -->
  >
    <p v-if="show">Hello</p>
  </Transition>
</template>

<script setup>
import gsap from 'gsap'

function beforeEnter(el) {
  console.log('Before enter:', el)
}

function enter(el, done) {
  gsap.to(el, {
    opacity: 1,
    y: 0,
    duration: 0.5,
    onComplete: done  // signal that the transition is done
  })
}

function afterEnter(el) {
  console.log('After enter:', el)
}

// leave / beforeLeave / afterLeave work the same way
</script>

npm install gsap

<template>
  <Transition :css="false" @enter="onEnter" @leave="onLeave">
    <p v-if="show">Hello GSAP</p>
  </Transition>
</template>

<script setup>
import gsap from 'gsap'

function onEnter(el, done) {
  gsap.fromTo(el, 
    { opacity: 0, y: 50 },
    { opacity: 1, y: 0, duration: 0.5, onComplete: done }
  )
}

function onLeave(el, done) {
  gsap.to(el, { opacity: 0, y: -50, duration: 0.3, onComplete: done })
}
</script>

npm install animate.css

// main.js
import 'animate.css'

npm install @vueuse/motion

// main.js
import { MotionPlugin } from '@vueuse/motion'
app.use(MotionPlugin)

Five demo blocks render stacked down the page.
Clicking a button starts a 0.3s animation instead of an instant swap: the greeting fades out, the slide paragraph moves off to the right edge, the modal scales up from 0 over a dark backdrop, added list items fade in and shifted items glide to their new position, and the tab panel uses the combo animation because of mode="out-in".

┌────────────────────────────────────────────────┐
│ 1. Fade in / fade out                          │
│   [Hide]   👋 Hello Fade                        │
│ 2. Slide                                       │
│   👉 Slide in                                   │
│   [Toggle]                                     │
│ 3. Scale (modal)                               │
│   [Open modal]                                 │
│ 4. TransitionGroup list animation              │
│   [New item        ] [Add]                     │
│   • Item 1   ×                                 │
│   • Item 2   ×                                 │
│ 5. Combo (tab switching)                       │
│   [Home] [Profile] [Settings]                  │
│   Current tab: Home                            │
└────────────────────────────────────────────────┘

Each interaction animates over 0.3s (0.5s for list items)
instead of switching instantly.