Vue.js 3 Javascript Animation Transition Hooks Tutorial

Lesson Video

If you prefer to learn visually, you can watch this lesson in video format.

Lesson Project

If you want to follow along with the examples, you will need to create an app generated by the Vue CLI .

Javascript Transition Hooks

Vue allows us to execute Javascript code at different stages of our animations, allowing us to build more complex animation behavior.

These hooks are similar to the transition classes in that we have access to enter and leave states.

Enter state:

• before-enter executes before the element starts to transition on to the page.
• enter executes when the element starts to transition on to the page.
• after-enter executes when the element has finished transitioning on to the page.

Leave state:

• before-leave executes before the element starts to transition off the page.
• leave executes when the element starts to transition off the page.
• after-leave executes when the element has finished transitioning off the page.

These hooks can be used on the transition component and take a function as value.

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
>

tip It’s convention to name the functions the same as their hooks in camelCase.

The hook function automatically gets access to the element that’s being transitioned as its first parameter.

methods: {
  beforeEnter(el) {
    // use el
  }
}

Hooks can be used on their own, or with CSS transitions or animations.

<transition
  name="transition-name"
  @after-enter="afterEnter"
>

To demonstrate, let’s set up a slide animation on a heading element in the root App component. We’ll use the enter and after-enter hooks with functions that change the text color.

<template>
  <transition
    appear
    name="slide"
    @enter="enter"
    @after-enter="afterEnter"
  >
    <h1>Transition Hooks</h1>
  </transition>
</template>

<script>
export default {
  methods: {
    enter(el) {
      el.style.color = 'blue'
    },
    afterEnter(el) {
      el.style.color = 'red'
    }
  }
}
</script>


<style>
.slide-enter-from,
.slide-leave-to {
  opacity: 0;
  transform: translateY(-50px)
}
.slide-enter-active,
.slide-leave-active {
  transition: all 2s ease-out
}

#app {text-align:center}
</style>

The heading will be blue as it transitions in to the page and turn red as soon as the transition is finished.

If we’re not using the hooks with CSS transitions, we can tell Vue not to handle transition classes by binding to the css attribute and setting it to false.

To demonstrate, we’ll add the attribute to our example.

<template>
  <transition
    appear
    name="slide"
    @enter="enter"
    @after-enter="afterEnter"
    :css="false"
  >
    <h1>Transition Hooks</h1>
  </transition>
</template>

<script>
export default {
  methods: {
    enter(el) {
      el.style.color = 'blue'
    },
    afterEnter(el) {
      el.style.color = 'red'
    }
  }
}
</script>

<style>
.slide-enter-from,
.slide-leave-to {
  opacity: 0;
  transform: translateY(-50px)
}
.slide-enter-active,
.slide-leave-active {
  transition: all 2s ease-out
}

#app {text-align:center}
</style>

Even though the transition classes exist, they aren’t used because css is set to false.

note Transition hooks are typically used with animation libraries like GreenSock .