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

Need a 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

Need a 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
  }
}

Need a 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 = ''
  }
}

Need a hint?

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