Dynamic transitions in Vue - Step-by-Step Execution

Concept Flow - Dynamic transitions

Start Component

↓

User triggers state change

↓

Vue detects reactive change

↓

Apply dynamic transition name

↓

Transition hooks run

↓

Element enters or leaves DOM

↓

Animation plays

↓

Transition ends, DOM updated

This flow shows how Vue uses dynamic transition names to animate elements when their state changes.

Execution Sample

Vue

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

<script setup>
import { ref } from 'vue'
const show = ref(true)
const transitionName = ref('fade')
function toggle() {
  show.value = !show.value
  transitionName.value = show.value ? 'fade' : 'slide'
}
</script>

This Vue component toggles a paragraph with a dynamic transition name that changes between 'fade' and 'slide'.

Execution Table

Step	Action	State Before	State After	Transition Name	DOM Change	Animation
1	Initial render	show=true	show=true	fade	Paragraph <p> rendered	fade enter animation starts
2	User clicks toggle	show=true	show=false	slide	Paragraph <p> removed	slide leave animation starts
3	Animation ends	show=false	show=false	slide	Paragraph <p> removed	No animation
4	User clicks toggle	show=false	show=true	fade	Paragraph <p> rendered	fade enter animation starts
5	Animation ends	show=true	show=true	fade	Paragraph <p> rendered	No animation

💡 No more user clicks; component stable with show=true and fade transition.

Variable Tracker

Variable	Start	After Step 2	After Step 4	Final
show	true	false	true	true
transitionName	'fade'	'slide'	'fade'	'fade'

Key Moments - 3 Insights

Why does the transition name change when toggling the paragraph?

Because the toggle function updates the transitionName variable based on show's value, as seen in execution_table steps 2 and 4.

What happens to the paragraph element when show becomes false?

The paragraph is removed from the DOM but only after the leave animation finishes, shown in execution_table step 2 and 3.

Why is the animation different when the paragraph appears vs disappears?

Because the transition name changes dynamically, Vue applies different CSS classes for enter and leave animations, as shown in the transitionName column.

Visual Quiz - 3 Questions

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

A undefined

B true

C false

D null

💡 Hint

Check the 'State After' column in row for step 2.

At which step does the 'slide' transition animation start?

A Step 2

B Step 1

C Step 4

D Step 5

💡 Hint

Look at the 'Animation' column for when 'slide leave animation starts'.

If the toggle function did not update transitionName, what would happen?

A The paragraph would not toggle visibility.

B The transition name would always be 'fade'.

C Animations would not run at all.

D The paragraph would stay visible permanently.

💡 Hint

Refer to variable_tracker for transitionName changes.

Concept Snapshot

Dynamic transitions in Vue let you change the animation style based on state.
Use :name binding on <transition> to set the animation class dynamically.
Toggle reactive variables to trigger enter/leave animations.
Vue applies CSS classes based on the current transition name.
This helps create smooth, state-dependent animations.

Full Transcript

This example shows a Vue component with a button that toggles a paragraph's visibility. The transition name changes dynamically between 'fade' and 'slide' depending on whether the paragraph is shown or hidden. When the user clicks the button, Vue updates the reactive variables 'show' and 'transitionName'. Vue then applies the corresponding transition animation to the paragraph entering or leaving the DOM. The execution table traces each step: initial render with 'fade', toggle to hide with 'slide', animation end, toggle to show with 'fade', and final animation end. The variable tracker shows how 'show' and 'transitionName' change over time. Key moments clarify why the transition name changes and how animations correspond to DOM changes. The quiz tests understanding of state changes and animation triggers. This visual execution helps beginners see how dynamic transitions work in Vue by following state, DOM, and animation changes step-by-step.

Practice

1. What does the :name attribute in Vue's <transition> component control?

easy

A. The CSS class name used for the transition animation

B. The HTML tag used for the transition wrapper

C. The JavaScript function called during transition

D. The duration of the transition in milliseconds

Solution

1. Step 1: Understand the role of :name in <transition>

   The :name attribute sets the base CSS class name for the transition states like enter and leave.

2. Step 2: Connect :name to CSS animation classes

   Vue uses this name to apply classes such as {name}-enter-active and {name}-leave-active to trigger CSS animations.

3. Final Answer:

   The CSS class name used for the transition animation -> Option A

4. Quick Check:

   Transition :name = CSS class base name [OK]

Hint: Remember :name sets CSS classes for animations [OK]

Common Mistakes:

• Confusing :name with HTML tag or JS function
• Thinking :name controls timing instead of class names
• Assuming :name is optional for dynamic transitions

2. Which of the following is the correct syntax to bind a dynamic transition name in Vue?

easy

A. <transition v-bind:name>

B. <transition :name="fade">

C. <transition name="fade">

D. <transition :name="transitionName">

Solution

1. Step 1: Identify dynamic binding syntax in Vue

   Dynamic binding uses : or v-bind: with a JavaScript expression inside quotes.

2. Step 2: Check which option uses a variable for dynamic name

   <transition :name="transitionName"> uses :name="transitionName", correctly binding a variable named transitionName.

3. Final Answer:

   <transition :name="transitionName"> -> Option D

4. Quick Check:

   Dynamic binding = :name="variable" [OK]

Hint: Use :name="variable" for dynamic transition names [OK]

Common Mistakes:

• Using static string without binding for dynamic names
• Missing quotes around variable name
• Using :name without a value

3. Given this Vue template snippet:

<template>
  <transition :name="animation">
    <div v-if="show">Hello</div>
  </transition>
</template>

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

What happens if you change animation.value from 'fade' to 'slide' while show is true?

medium

A. The div will animate with the 'slide' transition on next toggle

B. The div immediately animates with the 'slide' transition without toggling

C. No animation occurs until show changes

D. Vue throws an error because transition name changed dynamically

Solution

1. Step 1: Understand when transitions trigger

   Transitions animate when elements enter or leave the DOM, triggered by v-if changes.

2. Step 2: Changing transition name while element is visible

   Changing animation.value alone does not trigger enter/leave, so no animation runs immediately.

3. Final Answer:

   No animation occurs until show changes -> Option C

4. Quick Check:

   Transition triggers on DOM changes, not name changes [OK]

Hint: Transitions run on element enter/leave, not on name change alone [OK]

Common Mistakes:

• Thinking transition changes animate immediately
• Assuming Vue errors on dynamic name changes
• Confusing v-if toggling with reactive variable changes

4. Consider this Vue code snippet:

<transition :name="currentTransition">
  <div v-if="visible">Content</div>
</transition>

<script setup>
import { ref } from 'vue'
const visible = ref(true)
const currentTransition = ref('fade')

// Later in code
currentTransition = 'slide'
</script>

What is the main problem in this code?

medium

A. Directly assigning a new string to a ref variable instead of using .value

B. Using v-if inside <transition> is not allowed

C. Transition names cannot be changed dynamically

D. Missing quotes around transition names

Solution

1. Step 1: Identify how to update Vue refs

   Refs are reactive objects; to update their value, use .value, not direct assignment.

2. Step 2: Spot incorrect assignment

   The code does currentTransition = 'slide' which replaces the ref instead of updating its value.

3. Final Answer:

   Directly assigning a new string to a ref variable instead of using .value -> Option A

4. Quick Check:

   Update ref with .value, not direct assignment [OK]

Hint: Update ref variables with .value, not direct assignment [OK]

Common Mistakes:

• Assigning new value directly to ref variable
• Thinking v-if cannot be used inside transition
• Believing transition names are static only

5. You want to create a Vue component that switches between 'fade' and 'slide' transitions dynamically based on a button click. Which approach correctly updates the transition and triggers the animation each time the button toggles visibility?

hard

A. Change the transition name ref only without toggling visibility

B. Use a ref for transition name and toggle show to trigger enter/leave animations

C. Use a computed property for transition name but keep show always true

D. Apply both transitions simultaneously by listing names in :name

Solution

1. Step 1: Understand how transitions trigger in Vue

   Transitions animate when elements enter or leave the DOM, controlled by v-if or similar directives.

2. Step 2: Combine dynamic transition name with toggling visibility

   Changing the transition name alone won't animate; toggling show triggers the animation with the current transition name.

3. Step 3: Confirm correct approach

   Using a ref for transition name and toggling show ensures the element animates with the chosen transition each toggle.

4. Final Answer:

   Use a ref for transition name and toggle show to trigger enter/leave animations -> Option B

5. Quick Check:

   Toggle visibility + dynamic name = dynamic transitions [OK]

Hint: Toggle element visibility to trigger dynamic transitions [OK]

Common Mistakes:

• Changing transition name without toggling visibility
• Trying to apply multiple transitions at once
• Keeping element always visible expecting animation