0Pricing
Vue Academy · Lesson

JavaScript Transition Hooks

@before-enter, @enter, @after-enter, @leave hooks, using GSAP for complex animations.

Why JavaScript Hooks

CSS classes cover most cases, but some animations need JavaScript - integrating libraries like GSAP, animating canvas, or computing dynamic values. <Transition> exposes lifecycle hooks for exactly this.

The Available Hooks

Vue emits events for each phase: @before-enter, @enter, @after-enter, @enter-cancelled, and the matching leave hooks.

<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @leave="onLeave"
>
  <div v-if="show">Animated by JS</div>
</Transition>

All lessons in this course

  1. The Transition Component
  2. CSS Transitions and Animations
  3. JavaScript Transition Hooks
  4. TransitionGroup for List Animations
← Back to Vue Academy