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.