Rachel Nabors is the cultivator of the Web Animation community, author of Animation at Work, a Google Developer Expert, invited expert at the W3C, and has helped clients build motion design into their user interfaces.
She believes that animation is a necessary part of a complete and balanced user experience because it helps convey information visually that could otherwise bog down the human brain.
After summarizing CSS transitions, Rachel introduces how Vue handles transitions, with its
transition element, which allows the adding of entering and leaving transitions to any element or component.
When you assign a name to a
transition element, it creates these name-spaced CSS classes:
She explains how there is a separate lifecycle for when the element enters the page and when it leaves the page. Each lifecycle has an initial state (
leave) and an ending state (
enter to /
leave to). The actual transition is added with
However, she recommends not using
leave and instead putting the default state in the original CSS class. This way, if animation is not supported, the default state will still be shown.
Next, Rachel introduces the
transition-group element, which can wrap multiple elements and gives an additional class called
move, which is used with the FLIP animation technique. Her recommendation here is to set a unique key when using multiple elements within a transition group.
She goes on to discuss transition modes, which determine the order of animations, and how you can use
out-in to design how these elements enter and leave in relation to each other.
enter, etc., and Rachel demonstrates how you can use them to trigger a function with Vue’s
v-on directive, and she shows how you can use the Web Animation API’s
Pro Tip: she says to make sure to set
UI animation can cause negative side effects for some users, such as:
In her talk, Rachel walks through how to adjust animation code to make it accessible.