Transitions

Transition and TransitionGroup

The built-in <Transition> component animates a single element or component when it is inserted or removed by v-if, v-show or a dynamic component. Vue applies classes at each stage: v-enter-from, v-enter-active, v-enter-to, v-leave-from, v-leave-active and v-leave-to, where v is replaced by the name prop. You define the CSS transitions or animations; JavaScript hooks are also available. mode="out-in" waits for the old element to leave before the new one enters. <TransitionGroup> animates items in a v-for list, requires a unique key on each item, and adds a v-move class for items that change position.

A fading panel and an animated list

Named transitions with CSS.

<script setup>
import { ref } from 'vue'

const open = ref(false)
const items = ref([1, 2, 3])
let next = 4
const add = () => items.value.splice(Math.floor(Math.random() * items.value.length), 0, next++)
const remove = (n) => { items.value = items.value.filter(i => i !== n) }
</script>

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

  <button @click="add">Add</button>
  <TransitionGroup name="list" tag="ul">
    <li v-for="n in items" :key="n" @click="remove(n)">{{ n }}</li>
  </TransitionGroup>
</template>

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

.list-move, .list-enter-active, .list-leave-active { transition: all 0.3s ease; }
.list-enter-from, .list-leave-to { opacity: 0; transform: translateX(20px); }
.list-leave-active { position: absolute; }
</style>

Stage directions

Transition classes are stage directions: the actor (element) knows where to stand before entering, how to move while entering, and how to exit; Vue just calls the cues at the right time.

Quick check: Which classes define the starting state of an entering element and the end state of a leaving one with name="fade"?

• fade-enter-from and fade-leave-to
• fade-in and fade-out
• fade-start and fade-end
• v-show-enter and v-show-leave