Transition component basics in Vue - Step-by-Step Execution

Concept Flow - Transition component basics

Start: Element in DOM

↓

Trigger state change

↓

Transition component detects change

↓

Apply enter/leave CSS classes

↓

Browser animates element

↓

Remove element or keep based on state

↓

End transition

The Transition component watches for element changes and applies CSS classes to animate entering and leaving states.

Execution Sample

Vue

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

This toggles a paragraph with a fade animation using the Transition component.

Execution Table

Step	Action	State 'show'	Transition Classes Applied	Element Rendered
1	Initial render	false	none	No <p> element
2	Click button to toggle	true	fade-enter, fade-enter-active	<p> with fade-enter classes
3	Browser animates fade-in	true	fade-enter-to, fade-enter-active	<p> visible
4	Click button to toggle off	false	fade-leave, fade-leave-active	<p> with fade-leave classes
5	Browser animates fade-out	false	fade-leave-to, fade-leave-active	<p> fading out
6	Animation ends	false	none	<p> removed from DOM

💡 Transition ends and element is removed or shown based on 'show' state.

Variable Tracker

Variable	Start	After Step 2	After Step 4	Final
show	false	true	false	false
Transition Classes	none	fade-enter, fade-enter-active	fade-leave, fade-leave-active	none
Element Rendered	No <p>	<p> with enter classes	<p> with leave classes	No <p>

Key Moments - 2 Insights

Why does the <p> element stay in the DOM during the fade-out animation?

Because the Transition component applies leave classes and keeps the element until the animation finishes, as shown in steps 4 and 5.

What triggers the Transition component to apply enter or leave classes?

Changing the 'show' state triggers the Transition component to detect the element entering or leaving, applying the appropriate CSS classes (steps 2 and 4).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'show' at step 3?

A false

B true

C undefined

D null

💡 Hint

Check the 'State show' column at step 3 in the execution_table.

At which step does the <p> element get removed from the DOM?

A Step 6

B Step 3

C Step 2

D Step 4

💡 Hint

Look at the 'Element Rendered' column to see when

is no longer present.

If the 'show' state never changes from false, what classes are applied?

A fade-enter and fade-leave classes

B Only fade-enter classes

C No transition classes

D Only fade-leave classes

💡 Hint

Refer to the initial state in the variable_tracker and execution_table where 'show' is false and no classes are applied.

Concept Snapshot

Vue Transition component basics:
- Wrap elements with <transition> to animate enter/leave
- Use v-if or v-show to toggle elements
- Transition applies CSS classes: enter, enter-active, leave, leave-active
- Element stays in DOM during leave animation
- Animations end by removing classes and element if hidden

Full Transcript

The Vue Transition component helps animate elements entering or leaving the DOM. When a state like 'show' changes, the component applies CSS classes to trigger animations. For example, when 'show' becomes true, enter classes fade the element in. When 'show' becomes false, leave classes fade it out before removing it from the DOM. This process ensures smooth visual transitions. The element remains in the DOM during the leave animation, preventing abrupt disappearance. This example toggles a paragraph with a fade effect using the Transition component and CSS classes.

Practice

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

easy

A. To handle form validation

B. To fetch data from an API

C. To animate elements when they appear or disappear

D. To create reusable components

Solution

1. Step 1: Understand the role of the Transition component

   The Transition component is designed to wrap elements and animate their entrance and exit in the DOM.

2. Step 2: Compare with other options

   Fetching data, form validation, and reusable components are unrelated to animation, which is the Transition's focus.

3. Final Answer:

   To animate elements when they appear or disappear -> Option C

4. Quick Check:

   Transition = Animate appearance/disappearance [OK]

Hint: Transition = animation for showing/hiding elements [OK]

Common Mistakes:

• Thinking Transition fetches data
• Confusing Transition with form handling
• Assuming Transition creates components

2. Which of the following is the correct way to use the <Transition> component with a CSS animation named "fade"?

easy

A. <Transition effect="fade"><div v-if="show">Hello</div></Transition>

B. <Transition animation="fade"><div v-if="show">Hello</div></Transition>

C. <Transition class="fade"><div v-if="show">Hello</div></Transition>

D. <Transition name="fade"><div v-if="show">Hello</div></Transition>

Solution

1. Step 1: Recall the correct attribute for CSS class prefix

   The Transition component uses the name attribute to set the CSS class prefix for animations.

2. Step 2: Check the options for correct attribute usage

   Only <Transition name="fade"><div v-if="show">Hello</div></Transition> uses name="fade", which is correct. Others use invalid attributes like animation, class, or effect.

3. Final Answer:

   <Transition name="fade"><div v-if="show">Hello</div></Transition> -> Option D

4. Quick Check:

   Use name="fade" for CSS animation prefix [OK]

Hint: Use name="animationName" for Transition CSS classes [OK]

Common Mistakes:

• Using animation or effect instead of name
• Adding class attribute to Transition
• Forgetting to use v-if or v-show inside Transition

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

<template>
  <Transition name="slide">
    <div v-if="show">Slide Content</div>
  </Transition>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(true)
</script>

medium

A. The div will disappear with a slide animation

B. The div will disappear instantly without animation

C. The div will remain visible

D. There will be a syntax error

Solution

1. Step 1: Understand v-if with Transition

   The v-if controls the presence of the div. When show becomes false, the div is removed.

2. Step 2: Role of Transition with name="slide"

   The Transition component applies CSS classes with prefix "slide" to animate the element's exit.

3. Final Answer:

   The div will disappear with a slide animation -> Option A

4. Quick Check:

   v-if false + Transition = animated exit [OK]

Hint: v-if false inside Transition triggers exit animation [OK]

Common Mistakes:

• Thinking div disappears instantly without animation
• Assuming div stays visible
• Confusing v-if with v-show behavior

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

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

What is the problem?

medium

A. v-show should be replaced with v-if for Transition to work

B. The name attribute should be class instead

C. Transition does not work with v-show for enter/leave animations

D. The div must have a key attribute

Solution

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

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

2. Step 2: v-show only toggles visibility, so Transition cannot animate enter/leave properly

   Using v-show inside Transition does not trigger the full animation lifecycle.

3. Final Answer:

   v-show should be replaced with v-if for Transition to work -> Option A

4. Quick Check:

   Use v-if, not v-show, inside Transition for animations [OK]

Hint: Use v-if, not v-show, inside Transition for animations [OK]

Common Mistakes:

• Thinking v-show triggers enter/leave animations
• Confusing name attribute with class
• Believing key attribute is mandatory here

5. You want to animate a list of items appearing and disappearing using <Transition>. Which approach correctly applies the Transition component to animate each item individually when the list changes? A) Wrap the entire list with one <Transition> component. B) Wrap each list item inside its own <Transition> component. C) Use <TransitionGroup> instead of <Transition> for lists. D) Use <Transition> only on the parent container without keys on items.

hard

A. Wrap the entire list with one <Transition> component.

B. Use <TransitionGroup> instead of <Transition> for lists.

C. Wrap each list item inside its own <Transition> component.

D. Use <Transition> only on the parent container without keys on items.

Solution

1. Step 1: Recognize the need for list animations

   Animating multiple items entering and leaving requires special handling to animate each item individually.

2. Step 2: Understand Vue's recommended component for list animations

   <TransitionGroup> is designed to animate lists, handling keys and individual item transitions automatically.

3. Step 3: Evaluate other options

   Wrapping entire list with one Transition animates the whole list as one block, not individual items. Wrapping each item manually is cumbersome. Using Transition without keys breaks animations.

4. Final Answer:

   Use <TransitionGroup> instead of <Transition> for lists. -> Option B

5. Quick Check:

   Use TransitionGroup for list animations [OK]

Hint: Use TransitionGroup for animating lists, not Transition [OK]

Common Mistakes:

• Using Transition for entire list instead of TransitionGroup
• Not adding keys to list items
• Wrapping each item manually with Transition