VueConf US 2018


1. State of Vue

Evan You

2. How We Do Vue At GitLab

Jacob Schatz

3. Vue in Motion

Rachel Nabors

4. Testing Vue apps

Edd Yerburgh

5. Serverless Functions and Vue.js

Sarah Drasner

6. vue-rx

John Lindquist

7. Create an Engaging Native Mobile App with Vue and NativeScript

Jen Looper

8. 7 secret patterns Vue consultants don't want you to know

Chris Fritz

9. Agile Design Systems in Vue

Miriam Suzanne

10. Vue & TypeScript: Up and Running

Daniel Rosenwasser

11. A React Point of Vue

Divya Sasidharan

12. Vue & SSR: The best practices

Sebastien Chopin

13. A Short Synopsis of Vue Storybook

Peter Finn

14. Prototyping with Vue Single File Component

Pine Wu

15. 5 Libraries You Should Know About

Adam Jahr

16. Update an Existing Application to Vue

Michael Bennett

17. Vue and Vuex for Complex Application State

Patrick Seda

18. Top 5 Must-Have UI Animation Patterns

Rachel Nabors

19. The Dream: A Full Rewrite

Seth White

20. Start Your Own Vue.js Meetup

Ben Hong

21. Reusability - Is It Worth It?

Shelton Clinard

22. Reactivity - Learning by Accident

Jeff Schenck

23. Quick Publishing of Redistributable SFC on NPM

Mike Dodge

24. OverVue of Vuetify.js


25. Ionic and Vue

Mike Hartington

26. Dynamic Store Modules with Vuex

Adam Bradford

27. Build a MiniFlix Clone with Vue Contest

Dan Zeitman

28. Beyond HTML with Vue

Eduardo San Martin Morote

29. Vue with AWS Lambda

Matt Biilmann

30. 40 Hour Plan For UX Proficiency

Jacob Covey

31. Code Splitting Patterns with Vue

Sean Thomas Larkin
Notify me when new talks are available.

Vue in Motion

Vue in Motion

Rachel Nabors

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.

Vue’s Transition Element

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:

  • enter
  • enter-to
  • enter-active
  • leave
  • leave-to
  • leave-active

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 (enter / leave) and an ending state (enter to / leave to). The actual transition is added with enter-active and leave-active.

However, she recommends not using enter-to or 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.

Transition Group

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.

Managing Toggling Elements

She goes on to discuss transition modes, which determine the order of animations, and how you can use in-out and out-in to design how these elements enter and leave in relation to each other.

JavaScript Animation Hooks

As her talk progresses, Rachel discusses JavaScript animation hooks using the Web Animation API. The transition element has a set of JavaScript hooks such as leave, 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 animate method.

Pro Tip: she says to make sure to set v-bind:css="false" when animating with JavaScript to avoid conflicts and performance issues. This means you have to tell Vue when the animation has ended, which she shows how to do.

Accessible Animations

UI animation can cause negative side effects for some users, such as:

  • Seizures caused by flashing and blinking
  • Nausea triggered by parallax motion
  • Distraction and fatigue brought on by looping animation

In her talk, Rachel walks through how to adjust animation code to make it accessible.