Enter and leave transitions in Vue - Step-by-Step Execution

Concept Flow - Enter and leave transitions

Element State: Not in DOM

↓

Trigger Enter Transition

↓

Add Element to DOM

↓

Apply Enter Classes

↓

Transition Animation Runs

↓

Remove Enter Classes

↓

Element Fully Visible

↓

Trigger Leave Transition

↓

Apply Leave Classes

↓

Transition Animation Runs

↓

Remove Element from DOM

This flow shows how Vue adds an element with enter transition and removes it with leave transition, applying CSS classes to animate.

Execution Sample

Vue

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

<script setup>
import { ref } from 'vue'
const show = ref(false)
setTimeout(() => show.value = true, 1000)
setTimeout(() => show.value = false, 4000)
</script>

This Vue code shows a paragraph that fades in after 1 second and fades out after 4 seconds using enter and leave transitions.

Execution Table

Step	Trigger/Event	Element State	Classes Applied	DOM Change	Description
1	Initial	Not in DOM	None	No element	Paragraph is not rendered initially
2	show.value = true (after 1s)	Add element	fade-enter-from fade-enter-active	Element added	Element inserted with enter classes to start fade-in
3	Transition animation running	In DOM	fade-enter-to fade-enter-active	Element present	Fade-in animation runs
4	Animation ends	In DOM	None	Element present	Enter classes removed, element fully visible
5	show.value = false (after 4s)	Start leave	fade-leave-from fade-leave-active	Element present	Leave class added to start fade-out
6	Transition animation running	In DOM	fade-leave-to fade-leave-active	Element present	Fade-out animation runs
7	Animation ends	Remove element	None	Element removed	Element removed from DOM after leave transition

💡 Element removed from DOM after leave transition finishes

Variable Tracker

Variable	Start	After Step 2	After Step 5	Final
show.value	false	true	false	false

Key Moments - 2 Insights

Why does the element stay in the DOM during the leave transition even though show.value is false?

Vue keeps the element in the DOM during the leave transition to allow the animation to run. See execution_table rows 5-7 where leave classes are applied before removal.

What is the difference between fade-enter-from and fade-enter-active classes?

fade-enter-from sets the start state of the animation, while fade-enter-active controls the animation duration and easing. They work together during the enter transition (rows 2-3).

Visual Quiz - 3 Questions

Look at the execution_table, what classes are applied when the element first appears in the DOM?

A fade-leave-active

B fade-leave-from

C fade-enter-from

D No classes

💡 Hint

Check Step 2 in the execution_table where the element is added with enter classes.

At which step does the element get removed from the DOM?

A Step 7

B Step 5

C Step 4

D Step 3

💡 Hint

Look for the step where DOM Change says 'Element removed' in the execution_table.

If show.value never changes to false, which steps would NOT happen?

A Steps 2 and 3

B Steps 5, 6, and 7

C Step 1 only

D All steps happen anyway

💡 Hint

Refer to variable_tracker and execution_table steps related to leave transition.

Concept Snapshot

Vue enter and leave transitions animate elements when they appear or disappear.
Use <transition> with CSS classes: fade-enter-from, fade-enter-active for entering,
fade-leave-from, fade-leave-active for leaving.
Vue keeps elements in DOM during leave to run animation before removal.
Transitions trigger on v-if or v-show changes controlling element presence.

Full Transcript

This visual execution shows how Vue handles enter and leave transitions. Initially, the element is not in the DOM. When the reactive variable 'show' changes to true, Vue adds the element and applies 'fade-enter-from' and 'fade-enter-active' classes to start the fade-in animation. After the animation finishes, the classes are removed and the element is fully visible. When 'show' changes to false, Vue applies 'fade-leave-from' and 'fade-leave-active' classes to start the fade-out animation but keeps the element in the DOM. After the animation ends, Vue removes the element from the DOM. This process ensures smooth animations for elements appearing and disappearing.

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