Enter and leave transitions in Vue

Introduction

Enter and leave transitions help make elements appear and disappear smoothly on the page. They make the user experience nicer by adding simple animations.

Showing or hiding a menu when a button is clicked

Displaying a notification that fades in and out

Animating a modal window opening and closing

Making list items appear one by one when loaded

Syntax

Vue

<transition name="fade">
  <div v-if="show">Content</div>
</transition>

The <transition> wrapper adds animation to its child element.

The name attribute sets the CSS classes prefix for the animation.

Examples

This fades the paragraph in and out when visible changes.

Vue

<transition name="fade">
  <p v-if="visible">Hello!</p>
</transition>

This slides the menu in and out using CSS classes starting with slide-.

Vue

<transition name="slide">
  <div v-if="open">Menu content</div>
</transition>

Without a name, Vue uses v- prefixed classes like v-enter-from. Define CSS for them to create animations such as fade.

Vue

<transition>
  <span v-if="show">Hello!</span>
</transition>

Sample Program

This Vue component shows a green box that fades and scales in and out when you click the button. The box is keyboard focusable and announces changes politely for accessibility.

Vue

<template>
  <button @click="toggle">Toggle Box</button>
  <transition name="fade">
    <div v-if="show" class="box" tabindex="0" aria-live="polite">
      I appear and disappear smoothly!
    </div>
  </transition>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
function toggle() {
  show.value = !show.value
}
</script>

<style scoped>
.box {
  width: 200px;
  height: 100px;
  background-color: #4caf50;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  margin-top: 1rem;
  outline: none;
}

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

Important Notes

Always wrap the element you want to animate inside a <transition> component.

Use v-if or v-show on the child element to control visibility.

Define CSS classes with the pattern {name}-enter-from, {name}-enter-active, {name}-leave-to, and {name}-leave-active for smooth animations.

Summary

Enter and leave transitions add smooth animations when elements appear or disappear.

Use the <transition> component with a name to apply CSS animations.

Control visibility with v-if or v-show inside the transition wrapper.

Practice

1. What is the main purpose of the <transition> component in Vue?

easy

A. To handle user input events

B. To add animations when elements enter or leave the DOM

C. To create reactive data properties

D. To fetch data from an API

Solution

1. Step 1: Understand the role of <transition>

   The <transition> component is designed to wrap elements and apply animations when they appear or disappear.

2. Step 2: Compare with other options

   Fetching data, creating reactive properties, and handling events are unrelated to <transition> functionality.

3. Final Answer:

   To add animations when elements enter or leave the DOM -> Option B

4. Quick Check:

   Enter and leave animations [OK]

Hint: Think: transition means animation on show/hide [OK]

Common Mistakes:

• Confusing transition with data fetching
• Thinking transition handles events
• Mixing transition with reactive data setup

2. Which of the following is the correct way to apply a CSS transition named "fade" to an element in Vue?

easy

A. Content

B. Content

C. Content

D. Content

Solution

1. Step 1: Check correct usage of <transition> with name

   The <transition> component requires a name attribute to link CSS classes, and the element to animate must be inside it with v-if or v-show.

2. Step 2: Validate each option

   <transition name="fade"><div v-if="show">Content</div></transition> correctly wraps the element inside <transition name="fade"> with v-if. Using transition as an attribute on div is invalid, placing v-if on <transition> does not work properly, and using class on div without name on <transition> misses the name attribute.

3. Final Answer:

   <transition name="fade"><div v-if="show">Content</div></transition> -> Option A

4. Quick Check:

   Use <transition name="fade"> wrapper [OK]

Hint: Always put v-if inside <transition name="..."> [OK]

Common Mistakes:

• Putting v-if on <transition> instead of child
• Missing the name attribute on <transition>
• Using transition attribute on div instead of component

3. Given this Vue template and CSS, what happens when show changes from false to true?

<template>
  <transition name="slide">
    <div v-if="show">Hello</div>
  </transition>
</template>

<style>
.slide-enter-active { transition: all 0.5s ease; }
.slide-enter-from { transform: translateX(-100%); opacity: 0; }
.slide-enter-to { transform: translateX(0); opacity: 1; }
</style>

medium

A. The div fades out when shown

B. The div instantly appears without animation

C. The div slides out to the right when shown

D. The div slides in from the left with fading effect

Solution

1. Step 1: Understand the transition classes

   The classes slide-enter-from and slide-enter-to define the start and end states for entering. The div starts translated left and transparent, then moves to normal position and full opacity.

2. Step 2: Analyze the effect when show changes true

   When show becomes true, the div enters with the slide-enter transition, sliding in from left and fading in.

3. Final Answer:

   The div slides in from the left with fading effect -> Option D

4. Quick Check:

   slide-enter-from to slide-enter-to = slide in + fade [OK]

Hint: Enter transitions use -enter-from to -enter-to classes [OK]

Common Mistakes:

• Confusing enter and leave animations
• Ignoring transform and opacity in CSS
• Assuming no animation on v-if change

4. Identify the error in this Vue transition code:

<transition name="fade">
  <div v-show="visible">Content</div>
</transition>

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

medium

A. The transition name should be "fade-leave" instead of "fade"

B. Using v-show instead of v-if prevents leave transition from running

C. Missing fade-enter classes causes no enter animation

D. The CSS transition duration is too short to see

Solution

1. Step 1: Examine the provided CSS classes

   Only leave transition classes (.fade-leave-active, .fade-leave-from, .fade-leave-to) are defined. No enter classes (.fade-enter-active, .fade-enter-from, .fade-enter-to) are present.

2. Step 2: Determine the impact

   Missing enter classes (.fade-enter-*) means no animation occurs when the element enters (visible changes from false to true). The leave transition works fine with v-show.

3. Final Answer:

   Missing fade-enter classes causes no enter animation -> Option C

4. Quick Check:

   Missing enter classes = no enter animation [OK]

Hint: Define enter-active/from/to for enter animations [OK]

Common Mistakes:

• Thinking v-show prevents leave animations (it doesn't)
• Proposing to change transition name
• Focusing on duration instead of missing classes

5. You want to create a fade transition that only triggers when a list item is removed, not when added. Which approach correctly achieves this in Vue?

hard

A. Use <transition> with only leave-active and leave-from/to CSS classes, no enter classes

B. Use <transition> with enter and leave classes but set v-show instead of v-if

C. Use <transition> with enter classes only and no leave classes

D. Use <transition> with both enter and leave classes and toggle v-if normally

Solution

1. Step 1: Understand transition class roles

   Enter classes control animation when element appears; leave classes control animation when element disappears.

2. Step 2: To animate only removal, define leave classes only

   By omitting enter classes, no animation runs on enter, but leave animations run on removal.

3. Final Answer:

   Use <transition> with only leave-active and leave-from/to CSS classes, no enter classes -> Option A

4. Quick Check:

   Only leave classes = animate removal only [OK]

Hint: Omit enter classes to animate only leave transitions [OK]

Common Mistakes:

• Using v-show prevents leave animations
• Defining enter classes triggers animation on add
• Confusing enter and leave class roles