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

1. Vue - State Transitions
Vue State Transitions | @vannsl

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. Page Control Indicator by Jardson Almeida

4. Why animate
What animate
How animate
❔
Vue State Transitions | @vannsl

5. Why animate
What animate
How animate
❔
Vue State Transitions | @vannsl

6. Spatial Perception
Vue State Transitions | @vannsl

7. Spatial Perception
Vue State Transitions | @vannsl

8. Perceived Performance
viget: Experiments in Loading - How Long Will You Wait?

9. Perceived Performance
viget: Experiments in Loading - How Long Will You Wait?

10. Vue State Transitions | @vannsl

11. Perceived Performance
Vue State Transitions | @vannsl

12. Why animate
What animate
How animate
❔
Vue State Transitions | @vannsl

13. Functional
Material
Delightful
“Functional animation fills the
comprehension gaps.”
Jedi Principles of UI Animations by Kit Oliynyk

14. “Material animation makes UI more
predictable and easier to navigate.”
Functional
Material
Delightful
Jedi Principles of UI Animations by Kit Oliynyk

15. “Make animation a part of your brand.”
Functional
Material
Delightful
Jedi Principles of UI Animations by Kit Oliynyk

16. Viget - Loading

17. Why animate
What animate
How animate
❔
Vue State Transitions | @vannsl

18. Vue Transition
😍😍😍
similar to ReactCSSTransitionGroups
Vue State Transitions | @vannsl

19. Transitions
Animations
🤔
Vue State Transitions | @vannsl

20. Vue Basics
Conditional Rendering
Vue State Transitions | @vannsl

21. v-if & v-show
Vue State Transitions | @vannsl

22. v-if & v-show
Vue State Transitions | @vannsl

23. v-if & v-show
Vue State Transitions | @vannsl

24. v-if & v-show
Vue State Transitions | @vannsl

25. Style and Class binding
Vue State Transitions | @vannsl

26. Style and Class binding
Vue State Transitions | @vannsl

27. Style and Class binding
Vue State Transitions | @vannsl

28. Style and Class binding
Vue State Transitions | @vannsl

29. Vue State Transitions | @vannsl
LIVE DEMO

30. Vue Transitions
Vue State Transitions | @vannsl

31. CSS Transitions
JS Transitions
State Transitions

32. CSS Transitions
JS Transitions
State Transitions

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. CSS Transitions
Vue State Transitions | @vannsl

35. CSS Transitions
• transform
• opacity
• animation (keyframes)
• …
Vue State Transitions | @vannsl

36. CSS Transitions
Vue State Transitions | @vannsl

37. Transition Modes
• in-out
• out-in
Vue - Transition modes

38. Transitioning between components
Vue - Transition modes by Sarah Drasner

39. Transitioning between routes
Vue - Router Transitions
Vue State Transitions | @vannsl

40. CSS Transitions
JS Transitions
State Transition

41. List transitions
Vue - List Transitions
<TransitionGroup/>
Vue State Transitions | @vannsl

42. CSS Transitions
JS Transitions
State Transitions

43. State transitions
Beyond CSS and JS:
How to go from one state to another?
Vue State Transitions | @vannsl

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. State transitions
Vue - Animating State with Watchers

46. State transitions
Vue - Animating State with Watchers

47. Thanks 🙏
Vue State Transitions | @vannsl

48. That’s it?
ANIMATIONS?!
😫😫😫
Vue State Transitions | @vannsl

49. Vue-controlled Wall-E by Sarah Drasner