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.