Advanced Animations and Transitions in Vue

Properly keying is essential

Many bugs with animations and transitions often come to not properly keying various elements in a v-for - this means the animation can't keep track of the object constancy and things behave strangely. Each key must be unique to each individual thing you want to animate.

Deciding between JS and CSS animations

A lot depends on how complicated you want an animation to be, if you want to stagger or delay parts of the animation, what properties you want to animate, if you want to pull sound into your animation, the mechanism you will use to trigger the animation, and how many DOM elements you will be animating at once.

Integrating Anime.js and Vue

Anime.js has an incredibly well-designed interface for designing performant animations. We will use it in combination with Vue's ref system so that we can maintain performance and keep our code as simple as possible.

Appearance Animations

By adding the [appear prop] to the <Transition appear> the transition will be applied on the initial render.

Event Animations

Sometimes we want an animation to be triggered when an event happens, like data being successfully fetched, user input, or some other sort of change. Anime makes this easy, as we can define the animation in a function and then pass the element into it as needed, using our existing event structure.

Vue's Built-In Enter/Leave Transitions

Vue has Transition and TransitionGroup components built in to apply animations when elements are added or removed, or change position within a v-for.

Named Transitions

You can create a named transition and define it in CSS.

<Transition name="fade"> ... </Transition>

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}
 
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

Custom Transition Classes

Some libraries like Animate.css provide a bunch of premade animations which can be invoked by adding class names to an element.

In Vue you can specify CSS class names to be added to the element at certain portions of the lifecycle:

<Transition
  name="custom-classes"
  enter-active-class="animate__animated animate__tada"
  leave-active-class="animate__animated animate__bounceOutRight"
>
  <p v-if="show">hello</p>
</Transition>

Transition Javascript Hooks

The <Transition> element also provides a number of handy event-style hooks that will allow us to use javascript to animate the element in more elaborate ways.

<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @enter-cancelled="onEnterCancelled"
  @before-leave="onBeforeLeave"
  @leave="onLeave"
  @after-leave="onAfterLeave"
  @leave-cancelled="onLeaveCancelled"
>
 
</Transition>

Page & Element Transitions

Nuxt provides page transitions that let you apply classes as the route or layout changes.

.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
}