More Related Content Similar to Vue in Motion (20) More from Rachel Nabors (13) Vue in Motion15. Animation is a necessary part of
your complete and balanced user
experience.
20. A CSS transition describes
how a element should show a
change to one of its CSS
properties.
23. .ball {
}
.ball {
transition: <property> <duration> <delay> <easing>;
}
so this must
be the delay
duration alwayscomes first
Not today, Satan!
25. CSS Animations and Transitions:
the Definitive Course
rachelnabors.com/css-animations-course
29. So you think you can <transition>?
• Dynamic components
• Component root nodes
• Condi9onal rendering using v-if
• Condi9onal display using v-show
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>
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.
61. when you want your behavior in your JS
JavaScript Animation Hooks’
68. For fewer CSS conflicts
& better performance, set
v-bind:css="false"
when animating with JavaScript!
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();
}
}
});
76. No CSS? No done? No deal!
At least when it comes to using
enter and leave JavaScript
animation hooks!
78. Check out these ace
Web Animations API
resources to learn more:
rachelnabors.com/waapi
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
87. Put the user in control.
This site uses anima,on and mo,on. Disable it?
89. Dem props!
• animationsOn: boolean
• motionQuery : matchMedia('(prefers-
reduced-motion)')
• accessibleAnimationQuerySupported: boolean
• prefersAnimation: boolean
94. peaceOut : function(el, done){
if (this.animationsOn){
animation.play()
animation.onfinish = done;
} else {
done();
}
}
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