The document discusses UI animations in Vue.js, emphasizing the importance of animations for user experience and providing examples of CSS transitions and animations. It covers various aspects such as defining transitions, using dynamic components, and employing JavaScript animation hooks for better performance. It also addresses accessibility concerns with animations and offers tips for ensuring a user-friendly experience.

1. @RachelNabors
.com

2. Vue in Motion
where and how to use UI animation in your app
in space

3. WebAnimationWeekly.com
slack.AnimationAtWork.com

4. devtoolschallenger.com

5. lightningdesignsystem.com/design/
motion

6. Some bad news.

12. cdpn.io/collection/DgmzgG

15. Animation is a necessary part of
your complete and balanced user
experience.

18. bkaprt.com/aaw

19. master the basics and the rest will follow
CSS Transitions

20. A CSS transition describes
how a element should show a
change to one of its CSS
properties.

21. color: blue color: pink
transition: color 800ms;

22. old value
transition: color 800ms;
new value

23. .ball {
}
.ball {
transition: <property> <duration> <delay> <easing>;
}
so this must
be the delay
duration alwayscomes first
Not today, Satan!

24. cdpn.io/XEJMdq

25. CSS Animations and Transitions:
the Definitive Course
rachelnabors.com/css-animations-course

26. gosh this looks familiar
Anatomy of Vue Animations

27. <transition name="warpdrive">
<p v-show="truthy">Thing to animate</p>
</transition>
<transition>
<p v-show="truthy">Thing to animate</p>
</transition>
<transition>
</transition>

28. cdpn.io/pen/GxmEmX

29. So you think you can <transition>?
• Dynamic components
• Component root nodes
• Condi9onal rendering using v-if
• Condi9onal display using v-show

30. Planning to change
an element frequently?
Use v-show!

31. cdpn.io/pen/GxmEmX

32. class-based anima6ons
Hooks for Animating with CSS

33. <transition name="unCloaked"></transition>
.v-enter,
.v-enter-to,
.v-enter-active,
.v-leave,
.v-leave-to,
.v-active
Creates name-spaced CSS classes…

34. <transition name="unCloaked"></transition>
.unCloaked-enter,
.unCloaked-enter-to,
.unCloaked-enter-active,
.unCloaked-leave,
.unCloaked-leave-to,
.unCloaked-active
Creates name-spaced CSS classes…

35. <transition name="uncloak"><ship v-show="shipUncloaked" /></transition><transition name="uncloak"><ship v-show="shipUncloaked" /></transition><transition name="uncloak"><ship v-show="shipUncloaked" /></transition>
shipUncloaked : true
.uncloak-enter .uncloak-enter-to

36. shipUncloaked : true
<transition name="uncloak"><ship v-show="shipUncloaked" /></transition>
.uncloak-enter-to {
opacity: 1;
}
.uncloak-enter {
opacity: 0;
}

37. .uncloak-enter-active {
transition: opacity 800ms;
}
<transition name="uncloak"><ship v-show="shipUncloaked" /></transition>
shipUncloaked : true
.uncloak-enter-to {
opacity: 1;
}
.uncloak-enter {
opacity: 0;
}

38. <transition name="uncloak"><ship v-show="shipUncloaked" /></transition><transition name="uncloak"><ship v-show="shipUncloaked" /></transition>
shipUncloaked : false
.uncloak-leave .uncloak-leave-to
.uncloak-leave-active
.uncloak-enter-active
shipUncloaked : true
.uncloak-enter-to.uncloak-enter

39. .ship {
opacity: 1;
}
shipUncloaked : falseshipUncloaked : true
.uncloak-leave-to
.cloak-leave-active
.uncloak-enter-active
.uncloak-leave.uncloak-enter-to.uncloak-enter
<transition name="uncloak"><ship v-show="shipUncloaked" /></transition>

40. cdpn.io/pen/GxmEmX

41. <transition name="warpdrive" appear>
<p>Thing to animate</p>
</transition>
<transition name="warpdrive">
<p v-if="truthy">Thing to animate</p>
</transition>
Appear

42. cdpn.io/pen/dmWJyg

43. for coordina6ng movements
Transition Groups

44. <transition>
<p>Other thing</p>
</transition>

45. <transition-group>
<div>Thing</div>
<p>Other thing</p>
<span>Thing</span>
</transition-group>

46. cdpn.io/XEJMdq

47. Multiple items within a
<transition group>
component?
Set a unique key on each one!

48. mo’ elements, mo’ modes
Managing toggling elements

50. cdpn.io/pen/XEJMdq

51. <transition> modes
• in-out New element animates in first, then when
complete, the current element animates out.
• out-in Current element animates out first, then when
complete, the new element animates in.

52. cdpn.io/pen/XEJMdq

53. SNAPOH

54. cdpn.io/rdjjOm

55. ‘cuz some6mes it’s already on the page
Animating static elements

56. cdpn.io/zWNNXL

57. cdpn.io/pen/zWNNXL

58. <div id="ui-panel"
v-on:click.once="activateConsole"
v-on:click="accessSystem = !accessSystem"
v-bind:class="{ ui_open : accessSystem }">

59. <div id="ui-panel"
v-on:click.once="activateConsole"
v-on:click="accessSystem = !accessSystem"
v-bind:class="{ ui_open : accessSystem }">

60. <div id="ui-panel"
v-on:click.once="activateConsole"
v-on:click="accessSystem = !accessSystem"
v-bind:class="{ ui_open : accessSystem }">

61. when you want your behavior in your JS
JavaScript Animation Hooks’

63. A “simple” animation with the
Web Animations API.

64. cdpn.io/XEgEQN

65. <transition name="uncloakJS">

66. <transition v-on:leave="uncloakJS">

67. <transition
v-on:leave="uncloakJS"
v-bind:css="false"
>

68. For fewer CSS conflicts
& better performance, set
v-bind:css="false"
when animating with JavaScript!

69. .uncloak-enter,
.uncloak-leave-to {
opacity: 0;
}
.uncloak-enter-active,
.uncloak-leave-active {
transition: opacity 1000ms;
}

70. const uncloakAnimation = starship.animate(
[
{ opacity: 0},
{ opacity: 1}
], {
duration : 1000,
fill : "both"
});

71. <transition
v-on:leave="uncloakJS"
v-bind:css="false"
>
<transition
v-on:leave="uncloakJS"
v-bind:css="false"
>

72. const app = new Vue({
el: "#starfield",
data: {
shipUncloaked: true
},
methods: {
uncloakJS: function (el, done) {
uncloakingAnimation.onfinish = done;
uncloakingAnimation.play();
}
}
});

73. const app = new Vue({
el: "#starfield",
data: {
uncloaked: true
},
methods: {
uncloakJS: function (el, done) {
uncloakingAnimation.onfinish = done;
uncloakingAnimation.play();
}
}
});

74. methods: {
uncloakJS: function (el, done) {
uncloakingAnimation.onfinish = done;
uncloakingAnimation.play();
}
}

75. methods: {
uncloakJS: function (el, done) {
uncloakingAnimation.onfinish = done;
uncloakingAnimation.play();
}
}

76. No CSS? No done? No deal!
At least when it comes to using
enter and leave JavaScript
animation hooks!

77. cdpn.io/pen/GxvWZw

78. Check out these ace
Web Animations API
resources to learn more:
rachelnabors.com/waapi

79. Giving users a choice
Accessible Animations

80. UI Animation can cause negative side effects like
• Seizures caused by flashing and blinking
• Nausea triggered by parallax mo9on
• Distrac-on and fa-gue brought on by looping anima9on

82. MediaQueriesLevel5Editor’sDra4
goo.gl/CcrVFs

83. cdpn.io/pen/zWNNXL

86. Progressive Enhancement FTW
DIY Animation Controls

87. Put the user in control.
This site uses anima,on and mo,on. Disable it?

88. cdpn.io/pen/KoXzLQ

89. Dem props!
• animationsOn: boolean
• motionQuery : matchMedia('(prefers-
reduced-motion)')
• accessibleAnimationQuerySupported: boolean
• prefersAnimation: boolean

90. cdpn.io/pen/KoXzLQ

91. cdpn.io/pen/KoXzLQ

92. What about JavaScript?

93. peaceOut : function(el){
if (this.animationsOn){
animation.play();
}
}

94. peaceOut : function(el, done){
if (this.animationsOn){
animation.play()
animation.onfinish = done;
} else {
done();
}
}

95. cdpn.io/qoPRbB

97. bkaprt.com/aaw

98. Thank you!
Chris Fritz
Sarah Drasner
And YOU!
@RachelNabors
.com
The pens: cdpn.io/collection/DgmzgG
The docs: vuejs.org/v2/guide/transitions.html
The dress: heruniverse.com