Transition component for animations in Vue - Step-by-Step Execution

Concept Flow - Transition component for animations

Component Render Start

↓

Check if element enters or leaves

↓

Enter

↓

Show element

↓

Component Render End

The Vue Transition component watches if an element is entering or leaving, applies CSS classes for animation, waits for the animation to finish, then shows or removes the element.

Execution Sample

Vue

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

This code animates the paragraph with fade effect when it appears or disappears.

Execution Table

Step	Action	Element State	CSS Classes Applied	Animation Phase	Result
1	Render transition component with show=true	Element not in DOM yet	none	waiting	Prepare to enter
2	Element enters (show=true)	Element added to DOM	fade-enter-from fade-enter-active	enter start	Element is hidden initially
3	Next frame	Element in DOM	fade-enter-active fade-enter-to	enter active	Element fades in
4	Transition ends	Element fully visible	none	enter end	Element shown, classes removed
5	show set to false, element leaves	Element still in DOM	fade-leave-from fade-leave-active	leave start	Element visible before leave
6	Next frame	Element in DOM	fade-leave-active fade-leave-to	leave active	Element fades out
7	Transition ends	Element removed from DOM	none	leave end	Element hidden and removed
8	No element to show	No element in DOM	none	idle	Waiting for next change

💡 Element removed after leave transition ends, no more animation.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6	After Step 7	Final
show	true	true	true	true	false	false	false	false
Element in DOM	no	yes	yes	yes	yes	yes	no	no
CSS Classes	none	fade-enter-from fade-enter-active	fade-enter-active fade-enter-to	none	fade-leave-from fade-leave-active	fade-leave-active fade-leave-to	none	none

Key Moments - 3 Insights

Why does the element stay in the DOM during the leave animation even though show is false?

Because Vue waits for the leave transition to finish before removing the element, as shown in steps 5-7 in the execution_table.

What is the purpose of the different CSS classes like fade-enter-from and fade-enter-to?

They define the start and end states of the animation. Vue switches these classes between frames to trigger CSS transitions, as seen in steps 2 and 3.

When are the CSS classes removed from the element?

After the transition ends, Vue removes the animation classes to clean up, shown in steps 4 and 7.

Visual Quiz - 3 Questions

Look at the execution_table, what CSS classes are applied at step 3?

A fade-enter-active fade-enter-to

B fade-leave-from

C none

D fade-enter-from

💡 Hint

Check the CSS Classes Applied column at step 3 in the execution_table.

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

A Step 5

B Step 4

C Step 7

D Step 8

💡 Hint

Look at the Element State column to find when the element disappears.

If the show variable never changes to false, which step will never happen?

A Step 2

B Step 5

C Step 3

D Step 4

💡 Hint

Step 5 is when the element starts leaving because show becomes false.

Concept Snapshot

Vue Transition component wraps elements to animate enter and leave.
It applies CSS classes in sequence: enter-from, enter-active, enter-to for entering.
For leaving: leave-from, leave-active, leave-to.
Vue waits for CSS transitions to finish before adding/removing elements.
Use v-if inside <transition> to animate showing/hiding.
Classes are based on the transition name prop.

Full Transcript

The Vue Transition component helps animate elements when they appear or disappear. When a wrapped element is added, Vue applies CSS classes to start the enter animation, switching classes between frames to trigger CSS transitions. It waits for the animation to finish before removing the classes and showing the element fully. When the element is removed, Vue applies leave animation classes and waits for the animation to finish before removing the element from the DOM. This process ensures smooth fade or slide effects. The key variables tracked are the show boolean controlling visibility, the element's presence in the DOM, and the CSS classes applied during each animation phase.