Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Vue in Motion

379 views

Published on

At the first Vue Conf US in New Orleans, I broke down Vue's CSS and JavaScript animation hooks in this space-themed talk.

Published in: Design
  • Be the first to comment

Vue in Motion

  1. 1. @RachelNabors .com
  2. 2. Vue in Motion where and how to use UI animation in your app in space
  3. 3. WebAnimationWeekly.com slack.AnimationAtWork.com
  4. 4. devtoolschallenger.com
  5. 5. lightningdesignsystem.com/design/ motion
  6. 6. Some bad news.
  7. 7. cdpn.io/collection/DgmzgG
  8. 8. Animation is a necessary part of your complete and balanced user experience.
  9. 9. bkaprt.com/aaw
  10. 10. master the basics and the rest will follow CSS Transitions
  11. 11. A CSS transition describes 
 how a element should show a change to one of its CSS properties.
  12. 12. color: blue color: pink transition: color 800ms;
  13. 13. old value transition: color 800ms; new value
  14. 14. .ball { } .ball { transition: <property> <duration> <delay> <easing>; } so this must be the delay duration alwayscomes first Not today, Satan!
  15. 15. cdpn.io/XEJMdq
  16. 16. CSS Animations and Transitions: the Definitive Course rachelnabors.com/css-animations-course
  17. 17. gosh this looks familiar Anatomy of Vue Animations
  18. 18. <transition name="warpdrive"> <p v-show="truthy">Thing to animate</p> </transition> <transition> <p v-show="truthy">Thing to animate</p> </transition> <transition> </transition>
  19. 19. cdpn.io/pen/GxmEmX
  20. 20. So you think you can <transition>? • Dynamic components • Component root nodes • Condi9onal rendering using v-if • Condi9onal display using v-show
  21. 21. Planning to change 
 an element frequently? Use v-show!
  22. 22. cdpn.io/pen/GxmEmX
  23. 23. class-based anima6ons Hooks for Animating with CSS
  24. 24. <transition name="unCloaked"></transition> .v-enter, .v-enter-to, .v-enter-active, .v-leave, .v-leave-to, .v-active Creates name-spaced CSS classes…
  25. 25. <transition name="unCloaked"></transition> .unCloaked-enter, .unCloaked-enter-to, .unCloaked-enter-active, .unCloaked-leave, .unCloaked-leave-to, .unCloaked-active Creates name-spaced CSS classes…
  26. 26. <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
  27. 27. shipUncloaked : true <transition name="uncloak"><ship v-show="shipUncloaked" /></transition> .uncloak-enter-to {
 opacity: 1;
 } .uncloak-enter {
 opacity: 0;
 }
  28. 28. .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;
 }
  29. 29. <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
  30. 30. .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>
  31. 31. cdpn.io/pen/GxmEmX
  32. 32. <transition name="warpdrive" appear> <p>Thing to animate</p> </transition> <transition name="warpdrive"> <p v-if="truthy">Thing to animate</p> </transition> Appear
  33. 33. cdpn.io/pen/dmWJyg
  34. 34. for coordina6ng movements Transition Groups
  35. 35. <transition> <p>Other thing</p> </transition>
  36. 36. <transition-group> <div>Thing</div> <p>Other thing</p> <span>Thing</span> </transition-group>
  37. 37. cdpn.io/XEJMdq
  38. 38. Multiple items within a <transition group> component? 
 Set a unique key on each one!
  39. 39. mo’ elements, mo’ modes Managing toggling elements
  40. 40. cdpn.io/pen/XEJMdq
  41. 41. <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.
  42. 42. cdpn.io/pen/XEJMdq
  43. 43. SNAPOH
  44. 44. cdpn.io/rdjjOm
  45. 45. ‘cuz some6mes it’s already on the page Animating static elements
  46. 46. cdpn.io/zWNNXL
  47. 47. cdpn.io/pen/zWNNXL
  48. 48. <div id="ui-panel" v-on:click.once="activateConsole" v-on:click="accessSystem = !accessSystem" v-bind:class="{ ui_open : accessSystem }">
  49. 49. <div id="ui-panel" v-on:click.once="activateConsole" v-on:click="accessSystem = !accessSystem" v-bind:class="{ ui_open : accessSystem }">
  50. 50. <div id="ui-panel" v-on:click.once="activateConsole" v-on:click="accessSystem = !accessSystem" v-bind:class="{ ui_open : accessSystem }">
  51. 51. when you want your behavior in your JS JavaScript Animation Hooks’
  52. 52. A “simple” animation with the Web Animations API.
  53. 53. cdpn.io/XEgEQN
  54. 54. <transition name="uncloakJS">
  55. 55. <transition v-on:leave="uncloakJS">
  56. 56. <transition   v-on:leave="uncloakJS"   v-bind:css="false" >
  57. 57. For fewer CSS conflicts 
 & better performance, set 
 v-bind:css="false" 
 when animating with JavaScript!
  58. 58. .uncloak-enter, .uncloak-leave-to { opacity: 0; } .uncloak-enter-active, .uncloak-leave-active { transition: opacity 1000ms; }
  59. 59. const uncloakAnimation = starship.animate(
 [ { opacity: 0}, { opacity: 1} ], { duration : 1000, fill : "both" });
  60. 60. <transition   v-on:leave="uncloakJS"   v-bind:css="false" > <transition   v-on:leave="uncloakJS"   v-bind:css="false" >
  61. 61. const app = new Vue({ el: "#starfield", data: { shipUncloaked: true }, methods: { uncloakJS: function (el, done) { uncloakingAnimation.onfinish = done; uncloakingAnimation.play(); } } });
  62. 62. const app = new Vue({ el: "#starfield", data: { uncloaked: true }, methods: { uncloakJS: function (el, done) { uncloakingAnimation.onfinish = done; uncloakingAnimation.play(); } } });
  63. 63. methods: { uncloakJS: function (el, done) { uncloakingAnimation.onfinish = done; uncloakingAnimation.play(); } }
  64. 64. methods: { uncloakJS: function (el, done) { uncloakingAnimation.onfinish = done; uncloakingAnimation.play(); } }
  65. 65. No CSS? No done? No deal! At least when it comes to using enter and leave JavaScript animation hooks!
  66. 66. cdpn.io/pen/GxvWZw
  67. 67. Check out these ace 
 Web Animations API resources to learn more: rachelnabors.com/waapi
  68. 68. Giving users a choice Accessible Animations
  69. 69. 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
  70. 70. MediaQueriesLevel5Editor’sDra4 goo.gl/CcrVFs
  71. 71. cdpn.io/pen/zWNNXL
  72. 72. Progressive Enhancement FTW DIY Animation Controls
  73. 73. Put the user in control. This site uses anima,on and mo,on. Disable it?
  74. 74. cdpn.io/pen/KoXzLQ
  75. 75. Dem props! • animationsOn: boolean • motionQuery : matchMedia('(prefers- reduced-motion)') • accessibleAnimationQuerySupported: boolean • prefersAnimation: boolean
  76. 76. cdpn.io/pen/KoXzLQ
  77. 77. cdpn.io/pen/KoXzLQ
  78. 78. What about JavaScript?
  79. 79. peaceOut : function(el){ if (this.animationsOn){ animation.play(); } }
  80. 80. peaceOut : function(el, done){ if (this.animationsOn){ animation.play() animation.onfinish = done; } else { done(); } }
  81. 81. cdpn.io/qoPRbB
  82. 82. bkaprt.com/aaw
  83. 83. 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

×