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.

Practice

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

easy

A. To add animations when elements enter or leave the page

B. To fetch data from an API

C. To manage application state globally

D. To create reusable UI components

Solution

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

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

2. Step 2: Compare with other options

   Fetching data, managing state, and creating components are unrelated to animation transitions.

3. Final Answer:

   To add animations when elements enter or leave the page -> Option A

4. Quick Check:

   Transition component = animations on enter/leave [OK]

Hint: Think: Transition means smooth entering or leaving [OK]

Common Mistakes:

• Confusing Transition with data fetching
• Thinking it manages state
• Assuming it creates components

2. Which of the following is the correct way to use the <Transition> component with a CSS class name 'fade'?

easy

A. Content

B. Content

C. Content

D. Content

Solution

1. Step 1: Recall the correct attribute for naming transition classes

   The name attribute sets the base CSS class for transition states.

2. Step 2: Check the options

   Only
   Content
   uses name="fade", which is correct. Others use invalid attributes like class, animation, or effect.

3. Final Answer:

   <Transition name="fade"><div v-if="show">Content</div></Transition> -> Option C

4. Quick Check:

   Use name="fade" for CSS classes [OK]

Hint: Use 'name' attribute to link CSS classes [OK]

Common Mistakes:

• Using 'class' instead of 'name'
• Using non-existent attributes like 'animation'
• Forgetting to wrap the element inside <Transition>

3. Given the following Vue template code, what will happen when show changes from false to true?

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

medium

A. The div will appear instantly without any animation

B. The div will appear with slide-enter-from and slide-enter-active CSS classes applied for animation

C. The div will not appear because Transition blocks rendering

D. The div will appear but with fade animation instead of slide

Solution

1. Step 1: Understand v-if with Transition

   When show becomes true, the div is inserted and Transition applies CSS classes based on the 'slide' name.

2. Step 2: Identify the animation classes

   The classes like slide-enter-from and slide-enter-active are added to animate the div's entrance.

3. Final Answer:

   The div will appear with slide-enter-from and slide-enter-active CSS classes applied for animation -> Option B

4. Quick Check:

   v-if true + Transition name = enter animation [OK]

Hint: v-if true triggers enter animation classes [OK]

Common Mistakes:

• Thinking Transition blocks rendering
• Assuming no animation on enter
• Confusing slide with fade animation

4. Identify the error in this Vue template using <Transition>:

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

medium

A. Using v-show instead of v-if prevents proper enter/leave animations

B. Missing closing tag for Transition

C. The name attribute should be 'fade-transition' not 'fade'

D. Transition cannot wrap a div element

Solution

1. Step 1: Understand difference between v-if and v-show with Transition

   Transition works best with v-if because it controls element insertion/removal, triggering enter/leave animations.

2. Step 2: Analyze the code

   Using v-show only toggles visibility via CSS, so Transition cannot detect element entering or leaving, preventing animations.

3. Final Answer:

   Using v-show instead of v-if prevents proper enter/leave animations -> Option A

4. Quick Check:

   Use v-if for Transition animations [OK]

Hint: Use v-if, not v-show, for enter/leave animations [OK]

Common Mistakes:

• Thinking v-show triggers enter/leave animations
• Believing name attribute must be longer
• Assuming Transition can't wrap div

5. You want to create a fade animation using <Transition> with these CSS classes:

.fade-enter-active { transition: opacity 0.5s; }
.fade-enter-from { opacity: 0; }
.fade-enter-to { opacity: 1; }
.fade-leave-active { transition: opacity 0.5s; }
.fade-leave-from { opacity: 1; }
.fade-leave-to { opacity: 0; }

Which Vue template correctly applies this animation to a paragraph that toggles with showText?

hard

A.
Hello World

B.
Hello World

C.
Hello World

D.
Hello World

Solution

1. Step 1: Match CSS classes with Transition usage

   The CSS classes use the base name 'fade', so the Transition component must have name="fade".

2. Step 2: Use v-if to toggle element presence

   v-if toggles the element in the DOM, triggering enter and leave animations. v-show only toggles visibility and won't trigger these animations.

3. Step 3: Check options

   Hello World

   uses name="fade" and v-if, which is correct.

   Hello World

   uses v-show, which won't animate properly.

   Hello World

   uses an invalid attribute 'animation'.

   Hello World

   shows the paragraph when showText is false, which is opposite of expected.

4. Final Answer:

   <Transition name="fade"> <p v-if="showText">Hello World</p> </Transition> -> Option D

5. Quick Check:

   Use name="fade" + v-if for fade animation [OK]

Hint: Use v-if with name="fade" for fade animations [OK]

Common Mistakes:

• Using v-show instead of v-if
• Using wrong attribute like animation
• Showing element when condition is false