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.

Practice

1. What is the main purpose of JavaScript hooks in Vue transitions?

easy

A. To run custom code at specific moments during enter and leave transitions

B. To replace CSS animations completely

C. To define the HTML structure of a component

D. To manage Vue component state

Solution

1. Step 1: Understand what JavaScript hooks do in Vue transitions

   JavaScript hooks allow you to run code at key moments during the enter and leave phases of a transition.

2. Step 2: Compare options with this understanding

   Only To run custom code at specific moments during enter and leave transitions correctly describes this purpose. Options B, C, and D describe unrelated concepts.

3. Final Answer:

   To run custom code at specific moments during enter and leave transitions -> Option A

4. Quick Check:

   JavaScript hooks = run code during transitions [OK]

Hint: Hooks run code during enter/leave, not replace CSS [OK]

Common Mistakes:

• Thinking hooks replace CSS animations
• Confusing hooks with component state management
• Believing hooks define HTML structure

2. Which of the following is the correct syntax to define a JavaScript hook for the beforeEnter phase in a Vue transition component?

easy

A. <transition v-on:before-enter="myHook">

B. <transition v-on:beforeEnter="myHook">

C. <transition @before-enter="myHook">

D. <transition @beforeEnter="myHook">

Solution

1. Step 1: Recall Vue event naming conventions for transitions

   Vue uses kebab-case event names for transition hooks, like before-enter, and the shorthand @ for v-on:.

2. Step 2: Match the correct syntax

   <transition @before-enter="myHook"> uses @before-enter, which is correct. Options A, C, and D use camelCase or incorrect casing.

3. Final Answer:

   <transition @before-enter="myHook"> -> Option C

4. Quick Check:

   Vue transition hooks use kebab-case with @ [OK]

Hint: Use kebab-case and @ for Vue transition hooks [OK]

Common Mistakes:

• Using camelCase event names
• Mixing v-on: and @ incorrectly
• Capitalizing event names

3. Given this Vue transition component snippet, what will be logged when the element starts entering?

<transition @enter="onEnter">
  <div v-if="show">Hello</div>
</transition>

medium

A. Nothing is logged because show is initially false

B. Throws an error because done() is called synchronously

C. Logs 'Enter started' immediately on page load

D. Logs 'Enter started' after 1 second when element appears

Solution

1. Step 1: Understand the timing of the show variable

   Initially, show is false, so the element is not rendered. After 1 second, show becomes true, triggering the enter transition.

2. Step 2: Analyze the enter hook behavior

   The onEnter hook logs 'Enter started' and calls done() immediately. This happens after 1 second when the element appears.

3. Final Answer:

   Logs 'Enter started' after 1 second when element appears -> Option D

4. Quick Check:

   Enter hook logs on element show [OK]

Hint: Enter hook runs when element appears, not on load [OK]

Common Mistakes:

• Thinking enter hook runs immediately on load
• Assuming no log because initial show is false
• Believing done() call causes error

4. Identify the error in this Vue transition JavaScript hook code:

<transition @leave="onLeave">
  <div v-if="visible">Bye</div>
</transition>

medium

A. Calling done() immediately before animation finishes causes transition to end too soon

B. Missing a return statement in onLeave function

C. Using setTimeout inside onLeave is not allowed

D. v-if should be v-show for transitions

Solution

1. Step 1: Understand the leave hook timing

   The onLeave hook should call done() only after the animation finishes to keep the element during transition.

2. Step 2: Analyze the code's done() call

   Here, done() is called immediately, but the opacity change happens after 500ms, so the transition ends too soon.

3. Final Answer:

   Calling done() immediately before animation finishes causes transition to end too soon -> Option A

4. Quick Check:

   done() must wait for animation end [OK]

Hint: Call done() only after animation completes [OK]

Common Mistakes:

• Calling done() too early
• Confusing v-if and v-show for transitions
• Thinking setTimeout is disallowed in hooks

5. You want to create a fade transition that delays the leave animation until a custom API call finishes. Which approach correctly uses JavaScript hooks to achieve this?

<transition @leave="handleLeave">
  <div v-if="show">Content</div>
</transition>

<script setup>
const show = ref(true)
async function apiCall() {
  return new Promise(resolve => setTimeout(resolve, 1000))
}

function handleLeave(el, done) {
  // What should go here?
}
</script>

hard

A. Set opacity to 0, call done(), then call apiCall()

B. Call apiCall(), then in .then() set opacity to 0 and call done()

C. Call done() immediately, then call apiCall()

D. Do nothing in handleLeave; rely on CSS only

Solution

1. Step 1: Understand the goal

   The leave transition should wait for the API call to finish before starting the fade out and completing the transition.

2. Step 2: Use async logic in the leave hook

   Call apiCall(), then after it resolves, set opacity to 0 and call done() to signal transition end.

3. Final Answer:

   Call apiCall(), then in .then() set opacity to 0 and call done() -> Option B

4. Quick Check:

   Wait async, then animate and done() [OK]

Hint: Wait async call before done() in leave hook [OK]

Common Mistakes:

• Calling done() before async finishes
• Ignoring async and relying on CSS only
• Calling done() too early, skipping animation