Transitions & Animations

Wrap an element in `<Transition>` and Vue adds enter/leave classes at the right times so you can animate with CSS — or hook into JS.

4 min read Level 2/5 #vue#transitions#animation

What you'll learn

Define enter and leave classes
Use named transitions
Animate v-for items with `<TransitionGroup>`

<Transition> adds CSS classes at the right moments during enter and leave so animations feel native. No animation library required for the common cases.

Anatomy

When the child enters the DOM, Vue adds *-enter-from, then on the next frame swaps it for *-enter-to while *-enter-active is present throughout. Leave mirrors this.

<template>
  <button @click="show = !show">toggle</button>
  <Transition name="fade">
    <p v-if="show">Hello</p>
  </Transition>
</template>

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

The name prop sets the class prefix.

Named Variations

Vue picks transition or animation automatically from your CSS. For both at once, set type="transition" or type="animation".

TransitionGroup For Lists

<TransitionGroup> is for lists rendered with v-for. It also handles FLIP animations when items reorder.

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

<style>
.list-enter-active,
.list-leave-active,
.list-move { transition: all 200ms; }
.list-enter-from,
.list-leave-to { opacity: 0; transform: translateY(10px); }
</style>

The move class lets siblings glide to their new positions.

JS Hooks

For physics or imperative work, listen to events:

<Transition @enter="(el, done) => animate(el).onfinish = done">…</Transition>

Set :css="false" to disable Vue’s CSS handling when you’re driving everything with JS.

Render Functions & JSX →