Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Vue in Motion

547 visualizaciones

Publicado el

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

Publicado en: Diseño
  • Sé el primero en comentar

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

×