JavaScript hooks for transitions in Vue - Step-by-Step Execution

Concept Flow - JavaScript hooks for transitions

Component state changes

↓

Transition starts

↓

Before-enter hook runs

↓

Enter hook runs

↓

Transition animation plays

↓

After-enter hook runs

↓

Transition ends

When a component changes state, Vue triggers transition hooks in order: before-enter, enter, animation, after-enter, then ends.

Execution Sample

Vue

<template>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
  >
    <div v-if="show">Hello</div>
  </transition>
</template>

This code shows a div appearing with transition hooks called at different stages.

Execution Table

Step	Hook Triggered	Action	Effect on Element	Notes
1	before-enter	Set element opacity to 0	Element hidden but present	Prepare element for animation
2	enter	Animate opacity from 0 to 1	Element fades in	Animation runs over duration
3	after-enter	Clean up inline styles	Element fully visible	Transition finished
4	No more hooks	Transition ends	Element stable	Ready for user interaction

💡 All hooks run in sequence until transition completes and element is fully visible.

Variable Tracker

Variable	Start	After before-enter	After enter	After after-enter	Final
element.opacity	undefined	0	0 to 1 (animating)	1	1

Key Moments - 3 Insights

Why does the element start invisible during before-enter?

Because the before-enter hook sets opacity to 0 to prepare for the fade-in animation, as shown in step 1 of the execution_table.

When does the actual animation happen?

During the enter hook (step 2), the opacity animates from 0 to 1, making the element fade in smoothly.

Why clean up styles after the transition?

The after-enter hook removes temporary styles so the element returns to normal styling, ensuring no leftover inline styles remain (step 3).

Visual Quiz - 3 Questions

Look at the execution_table, what is the element's opacity right after the before-enter hook?

A 1

B 0

C undefined

D 0.5

💡 Hint

Check the 'After before-enter' column in variable_tracker for element.opacity.

At which step does the element become fully visible?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at execution_table step 3 where opacity is set to 1 and styles are cleaned.

If the enter hook animation duration is longer, how does the execution_table change?

A Step 2 duration increases, other steps unchanged

B Step 1 runs longer

C Step 3 happens before Step 2

D Step 4 is skipped

💡 Hint

Animation duration affects the enter hook timing shown in step 2.

Concept Snapshot

JavaScript hooks for transitions in Vue:
- before-enter: prepare element (e.g., hide)
- enter: run animation (e.g., fade in)
- after-enter: clean styles
Hooks run in order during state change
Use to control transition timing and effects

Full Transcript

When a Vue component changes state to show or hide an element, Vue triggers JavaScript hooks for transitions. First, the before-enter hook runs to prepare the element, often setting styles like opacity to 0 to hide it initially. Then the enter hook runs, animating the element's properties such as fading opacity from 0 to 1. After the animation finishes, the after-enter hook cleans up temporary styles so the element looks normal. This sequence ensures smooth transitions. The execution table shows each hook step, the action taken, and the effect on the element's visibility. The variable tracker follows the element's opacity changing from undefined to 0, then animating to 1, and finally stable at 1. Understanding these hooks helps control how elements appear and disappear with animations in Vue.