JavaScript hooks for transitions in Vue - Mini Project: Build & Apply

JavaScript hooks for transitions in Vue

📖 Scenario: You are building a simple Vue 3 app that shows or hides a message with a smooth fade effect. You want to control the fade animation using JavaScript hooks inside Vue's <transition> component.

🎯 Goal: Create a Vue 3 component that toggles a message's visibility. Use the <transition> component with JavaScript hooks beforeEnter, enter, afterEnter, beforeLeave, leave, and afterLeave to animate the message's opacity from 0 to 1 when showing, and from 1 to 0 when hiding.

📋 What You'll Learn

Create a reactive boolean variable called showMessage initialized to false.

Create a function called toggleMessage that toggles showMessage between true and false.

Use a <transition> component with JavaScript hooks named beforeEnter, enter, afterEnter, beforeLeave, leave, and afterLeave.

Inside each hook, set or animate the element's opacity style to create a fade effect.

Bind the showMessage variable to conditionally render the message inside the transition.

💡 Why This Matters

🌍 Real World

Many web apps use transitions to improve user experience by smoothly showing or hiding content. JavaScript hooks give fine control over these animations beyond CSS classes.

💼 Career

Understanding Vue transitions and JavaScript hooks is useful for frontend developers building interactive, polished user interfaces.

1

Setup reactive variable and toggle function

Create a Vue 3 component using <script setup>. Inside it, import ref from 'vue'. Then create a reactive boolean variable called showMessage initialized to false. Also create a function called toggleMessage that toggles showMessage.value between true and false.

Vue

import { ref } from 'vue'

// Create showMessage variable
// Create toggleMessage function

Hint

Use ref(false) to create a reactive boolean. The toggle function should flip its value.

2

Add transition JavaScript hooks object

Below your reactive variable and function, create a constant called fadeHooks that is an object. Add these six methods to it: beforeEnter(el), enter(el, done), afterEnter(el), beforeLeave(el), leave(el, done), and afterLeave(el). For now, leave the method bodies empty.

Vue

import { ref } from 'vue'

const showMessage = ref(false)

function toggleMessage() {
  showMessage.value = !showMessage.value
}

// Create fadeHooks object with empty methods

Hint

Define an object with the six named methods for transition hooks.

3

Implement fade animation in JavaScript hooks

Inside the fadeHooks methods, implement fade animations by setting el.style.opacity. In beforeEnter, set opacity to '0'. In enter, animate opacity to '1' using requestAnimationFrame and call done() after. In afterEnter, clear the opacity style. Similarly, in beforeLeave, set opacity to '1'. In leave, animate opacity to '0' and call done(). In afterLeave, clear the opacity style.

Vue

import { ref } from 'vue'

const showMessage = ref(false)

function toggleMessage() {
  showMessage.value = !showMessage.value
}

const fadeHooks = {
  beforeEnter(el) {
    // Set opacity to 0
  },
  enter(el, done) {
    // Animate opacity to 1 and call done
  },
  afterEnter(el) {
    // Clear opacity style
  },
  beforeLeave(el) {
    // Set opacity to 1
  },
  leave(el, done) {
    // Animate opacity to 0 and call done
  },
  afterLeave(el) {
    // Clear opacity style
  }
}

Hint

Use requestAnimationFrame to trigger CSS transitions and listen for transitionend event to call done().

4

Add template with transition and toggle button

Add a <template> section. Inside it, add a <button> with a @click event bound to toggleMessage. Below the button, add a <transition> component with :css="false" and v-bind="fadeHooks". Inside the transition, conditionally render a <div> with the text 'Hello, Vue transitions!' only when showMessage is true. Use v-if="showMessage" on the div.

Vue

  
  
  



import { ref } from 'vue'

const showMessage = ref(false)

function toggleMessage() {
  showMessage.value = !showMessage.value
}

const fadeHooks = {
  beforeEnter(el) {
    el.style.opacity = '0'
  },
  enter(el, done) {
    requestAnimationFrame(() => {
      el.style.transition = 'opacity 0.3s'
      el.style.opacity = '1'
      el.addEventListener('transitionend', done, { once: true })
    })
  },
  afterEnter(el) {
    el.style.transition = ''
    el.style.opacity = ''
  },
  beforeLeave(el) {
    el.style.opacity = '1'
  },
  leave(el, done) {
    requestAnimationFrame(() => {
      el.style.transition = 'opacity 0.3s'
      el.style.opacity = '0'
      el.addEventListener('transitionend', done, { once: true })
    })
  },
  afterLeave(el) {
    el.style.transition = ''
    el.style.opacity = ''
  }
}

Hint

Use v-if="showMessage" inside the transition to show or hide the message. Bind the fadeHooks object to the transition with v-bind.

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