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.
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 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.
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;
}
One-time Support
Every bit matters. Thank you!