How to Create Enter Leave Transition in Vue: Simple Guide

In Vue, you create enter and leave transitions by wrapping elements with the <transition> component and defining CSS classes for enter and leave states. Vue automatically applies these classes when elements appear or disappear, enabling smooth animations.

Syntax

The <transition> component wraps the element you want to animate. It uses CSS classes to control the animation stages:

• v-enter-from: Starting state for enter
• v-enter-active: Active state for enter
• v-enter-to: Ending state for enter
• v-leave-from: Starting state for leave
• v-leave-active: Active state for leave
• v-leave-to: Ending state for leave

You define these classes in CSS to create the animation effect.

vue

<transition name="fade">
  <p v-if="show">Hello Vue Transition!</p>
</transition>

Output

The paragraph fades in when shown and fades out when hidden.

Example

This example shows a button toggling a message with a fade transition using CSS opacity and transition properties.

vue

<template>
  <div>
    <button @click="show = !show">Toggle Message</button>
    <transition name="fade">
      <p v-if="show">Hello Vue Transition!</p>
    </transition>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>

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

Output

Clicking the button smoothly fades the message in and out.

Common Pitfalls

Common mistakes include:

• Not wrapping the element in a single root inside <transition>.
• Forgetting to define all necessary CSS classes for enter and leave states.
• Using v-if on multiple sibling elements inside <transition> without a wrapper.
• Not setting transition durations in CSS, causing no visible animation.

Always ensure your CSS matches the name attribute on <transition>.

vue

<!-- Wrong: multiple root elements inside transition -->
<transition name="fade">
  <p v-if="show">One</p>
  <p v-if="show">Two</p>
</transition>

<!-- Right: wrap siblings in a single element -->
<transition name="fade">
  <div v-if="show">
    <p>One</p>
    <p>Two</p>
  </div>
</transition>

Output

The right example animates the whole div smoothly; the wrong example breaks transition.

Quick Reference

Class Name	Purpose
v-enter-from	Start state when element enters
v-enter-active	Transition active state for entering
v-enter-to	End state when element enters
v-leave-from	Start state when element leaves
v-leave-active	Transition active state for leaving
v-leave-to	End state when element leaves

Key Takeaways

Wrap the element to animate inside a component with a name.

Define CSS classes for enter and leave states matching the transition name.

Use v-if to control element presence for transitions to trigger.

Ensure only one root element inside to avoid errors.

Set CSS transition durations for visible animations.