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 - State Transitions

248 views

Published on

Meetup Talk by Vanessa Böhner about Vue State Transistions.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Vue - State Transitions

  1. 1. Vue - State Transitions Vue State Transitions | @vannsl
  2. 2. github.com/myposter-de/vue-animations github.com/myposter-de/vue-router-transitions github.com/myposter-de/vue-list-transitions Vue State Transitions | @vannsl
  3. 3. Page Control Indicator by Jardson Almeida
  4. 4. Why animate What animate How animate ❔ Vue State Transitions | @vannsl
  5. 5. Why animate What animate How animate ❔ Vue State Transitions | @vannsl
  6. 6. Spatial Perception Vue State Transitions | @vannsl
  7. 7. Spatial Perception Vue State Transitions | @vannsl
  8. 8. Perceived Performance viget: Experiments in Loading - How Long Will You Wait?
  9. 9. Perceived Performance viget: Experiments in Loading - How Long Will You Wait?
  10. 10. Vue State Transitions | @vannsl
  11. 11. Perceived Performance Vue State Transitions | @vannsl
  12. 12. Why animate What animate How animate ❔ Vue State Transitions | @vannsl
  13. 13. Functional Material Delightful “Functional animation fills the comprehension gaps.” Jedi Principles of UI Animations by Kit Oliynyk
  14. 14. “Material animation makes UI more predictable and easier to navigate.” Functional Material Delightful Jedi Principles of UI Animations by Kit Oliynyk
  15. 15. “Make animation a part of your brand.” Functional Material Delightful Jedi Principles of UI Animations by Kit Oliynyk
  16. 16. Viget - Loading
  17. 17. Why animate What animate How animate ❔ Vue State Transitions | @vannsl
  18. 18. Vue Transition 😍😍😍 similar to ReactCSSTransitionGroups Vue State Transitions | @vannsl
  19. 19. Transitions Animations 🤔 Vue State Transitions | @vannsl
  20. 20. Vue Basics Conditional Rendering Vue State Transitions | @vannsl
  21. 21. v-if & v-show Vue State Transitions | @vannsl
  22. 22. v-if & v-show Vue State Transitions | @vannsl
  23. 23. v-if & v-show Vue State Transitions | @vannsl
  24. 24. v-if & v-show Vue State Transitions | @vannsl
  25. 25. Style and Class binding Vue State Transitions | @vannsl
  26. 26. Style and Class binding Vue State Transitions | @vannsl
  27. 27. Style and Class binding Vue State Transitions | @vannsl
  28. 28. Style and Class binding Vue State Transitions | @vannsl
  29. 29. Vue State Transitions | @vannsl LIVE DEMO
  30. 30. Vue Transitions Vue State Transitions | @vannsl
  31. 31. CSS Transitions JS Transitions State Transitions
  32. 32. CSS Transitions JS Transitions State Transitions
  33. 33. Enter/Leave Transitions <Transition/>
 .v-enter .v-enter-active .v-enter-to .v-leave .v-leave-active .v-leave-to Vue Transition Classes
  34. 34. CSS Transitions Vue State Transitions | @vannsl
  35. 35. CSS Transitions • transform • opacity • animation (keyframes) • … Vue State Transitions | @vannsl
  36. 36. CSS Transitions Vue State Transitions | @vannsl
  37. 37. Transition Modes • in-out • out-in Vue - Transition modes
  38. 38. Transitioning between components Vue - Transition modes by Sarah Drasner
  39. 39. Transitioning between routes Vue - Router Transitions Vue State Transitions | @vannsl
  40. 40. CSS Transitions JS Transitions State Transition
  41. 41. List transitions Vue - List Transitions <TransitionGroup/> Vue State Transitions | @vannsl
  42. 42. CSS Transitions JS Transitions State Transitions
  43. 43. State transitions Beyond CSS and JS: How to go from one state to another? Vue State Transitions | @vannsl
  44. 44. Beyond CSS and JS: How to go from one state to another? Watch data (Vue watch) & Tween.js Vue State Transitions | @vannsl State transitions
  45. 45. State transitions Vue - Animating State with Watchers
  46. 46. State transitions Vue - Animating State with Watchers
  47. 47. Thanks 🙏 Vue State Transitions | @vannsl
  48. 48. That’s it? ANIMATIONS?! 😫😫😫 Vue State Transitions | @vannsl
  49. 49. Vue-controlled Wall-E by Sarah Drasner

×