JavaScript hooks for transitions in Vue

Introduction

JavaScript hooks for transitions let you run code at specific moments during an animation. This helps you control what happens when elements enter or leave the page.

You want to start a sound or effect exactly when an element appears.

You need to fetch data right after an animation finishes.

You want to clean up or reset something when an element disappears.

You want to coordinate multiple animations with custom timing.

You want to add or remove classes dynamically during transitions.

Syntax

Vue

<transition
  @before-enter="hookBeforeEnter"
  @enter="hookEnter"
  @after-enter="hookAfterEnter"
  @before-leave="hookBeforeLeave"
  @leave="hookLeave"
  @after-leave="hookAfterLeave"
>
  <!-- element to animate -->
</transition>

Each hook is a JavaScript function that runs at a specific transition phase.

Use component to wrap the element you want to animate.

Examples

Runs the onEnter function when the element starts entering.

Vue

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

Runs onAfterLeave after the element finishes leaving.

Vue

<transition @after-leave="onAfterLeave">
  <div v-if="show">Bye</div>
</transition>

Runs three hooks at different stages of entering.

Vue

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

Sample Program

This Vue component shows a box that fades in and out when you click the button. The JavaScript hooks control the fade effect by changing opacity step by step. Console logs show when each hook runs.

Vue

<template>
  <button @click="toggle">Toggle Box</button>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @before-leave="beforeLeave"
    @leave="leave"
    @after-leave="afterLeave"
  >
    <div v-if="show" class="box">I appear and disappear!</div>
  </transition>
</template>

<script setup>
import { ref } from 'vue'

const show = ref(false)

function toggle() {
  show.value = !show.value
}

function beforeEnter(el) {
  el.style.opacity = 0
  console.log('Before enter: opacity set to 0')
}

function enter(el, done) {
  let opacity = 0
  const step = () => {
    opacity += 0.1
    el.style.opacity = opacity
    if (opacity < 1) {
      requestAnimationFrame(step)
    } else {
      done()
    }
  }
  requestAnimationFrame(step)
  console.log('Enter: starting fade in')
}

function afterEnter(el) {
  console.log('After enter: fully visible')
}

function beforeLeave(el) {
  el.style.opacity = 1
  console.log('Before leave: opacity set to 1')
}

function leave(el, done) {
  let opacity = 1
  const step = () => {
    opacity -= 0.1
    el.style.opacity = opacity
    if (opacity > 0) {
      requestAnimationFrame(step)
    } else {
      done()
    }
  }
  requestAnimationFrame(step)
  console.log('Leave: starting fade out')
}

function afterLeave(el) {
  console.log('After leave: element hidden')
}
</script>

<style scoped>
.box {
  width: 200px;
  height: 100px;
  background-color: #42b983;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  border-radius: 8px;
  user-select: none;
}
button {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
}
</style>

Important Notes

Hooks receive the element as the first argument and a done callback for async animations.

Use done() to tell Vue when your animation finishes, so it can proceed.

Console logs help you see the order of hook calls during transitions.

Summary

JavaScript hooks let you run code at key moments in transitions.

Use hooks to customize animations beyond CSS.

Hooks help coordinate complex effects and side actions during enter/leave.