CSS transition classes in Vue - Step-by-Step Execution

Concept Flow - CSS transition classes

Element enters DOM

↓

Add v-enter class

↓

Add v-enter-active class

↓

Trigger browser reflow

↓

Remove v-enter class

↓

Add v-enter-to class

↓

Transition runs

↓

Remove v-enter-to and v-enter-active classes

↓

Element fully entered

When an element appears, Vue adds special classes step-by-step to trigger CSS transitions smoothly.

Execution Sample

Vue

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

This code shows a div with fade transition when 'show' changes.

Execution Table

Step	Action	Classes Added/Removed	Browser Reflow	Transition State
1	Element inserted	Add v-enter	No	Start entering
2	Add v-enter-active	Add v-enter-active	No	Prepare transition
3	Trigger reflow	No change	Yes	Force style recalculation
4	Remove v-enter	Remove v-enter	No	Start transition to end state
5	Add v-enter-to	Add v-enter-to	No	Transition running
6	Transition ends	Remove v-enter-to and v-enter-active	No	Entered complete
7	Element fully visible	No classes	No	Stable state

💡 Transition finished, all temporary classes removed, element fully visible.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 4	After Step 5	After Step 6	Final
elementClasses	[]	["v-enter"]	["v-enter", "v-enter-active"]	["v-enter-active"]	["v-enter-active", "v-enter-to"]	[]	[]
transitionState	"none"	"start entering"	"prepare transition"	"start transition to end state"	"transition running"	"entered complete"	"stable"

Key Moments - 3 Insights

Why does Vue add both v-enter and v-enter-active classes at first?

Vue adds v-enter to set the start style and v-enter-active to define the transition properties. This pairing allows the browser to know what to animate. See execution_table steps 1 and 2.

What is the purpose of triggering a browser reflow in step 3?

Triggering reflow forces the browser to apply the initial styles before moving to the final styles. This ensures the transition runs smoothly. Refer to execution_table step 3.

When are the transition classes removed and why?

After the transition ends, Vue removes v-enter-to and v-enter-active classes to clean up and leave the element in its final visible state. See execution_table step 6.

Visual Quiz - 3 Questions

Look at the execution_table, which classes are present right after the browser reflow?

A ["v-enter", "v-enter-active"]

B ["v-enter-active"]

C ["v-enter-to"]

D []

💡 Hint

Check the Classes Added/Removed column at Step 2 and Step 3 in execution_table.

At which step does the transition actually start running?

A Step 4

B Step 5

C Step 2

D Step 6

💡 Hint

Look at the Transition State column in execution_table to find when 'transition running' occurs.

If the browser reflow (Step 3) was skipped, what would likely happen?

A Transition would run normally

B Classes would not be added

C Transition might not run or jump abruptly

D Element would not appear

💡 Hint

Consider the importance of reflow in execution_table Step 3 and key_moments explanation.

Concept Snapshot

Vue CSS transition classes flow:
- Add v-enter and v-enter-active on element insert
- Trigger browser reflow to apply start styles
- Remove v-enter, add v-enter-to to start transition
- On transition end, remove v-enter-to and v-enter-active
- Element stays visible without transition classes
This sequence ensures smooth CSS animations on enter.

Full Transcript

When Vue shows an element with a transition, it adds special CSS classes in a specific order. First, it adds v-enter and v-enter-active to set the start styles and transition properties. Then it triggers a browser reflow to make sure styles are applied. After that, it removes v-enter and adds v-enter-to to start the transition to the final style. When the transition finishes, Vue removes the temporary classes, leaving the element fully visible. This step-by-step class management makes the CSS transition smooth and visually appealing.