Deep dive into vue.js transitions

My slides about the power of Vue.js transitions @FEVR, Verona (IT).

Event: http://www.fevr.it/eventi/2019/01/deep-dive-into-vue-js-transitions/

Transcript

1. Vue.js Deep Dive Into Transitions
2. Lorenzo Girardi Frontend Developer CAFFEINA www.giralo.me
3. PSST WE’RE HIRING https://caffeina.com/jobs
4. INTRO .01
5. Animations Transitions Differences Between
6. Transition A transition occurs when an element changes from one state to another.
7. Animation Animations can be made up of as many in-between states, and offer more control over how the states are animated.
8. ? When do we NEED THEM
9. When to use State changes Component mounts Page changes UX Interactions
10. Don’t use animations if they are not helping anyone
11. COMP ARE .02
12. Angular The main Angular modules for animations are @angular/animations and @angular/platform-browser. These dependencies are automatically added to your project. https://angular.io/guide/animations
13. Considerations Well documented Timeline animations No CSS transition support 3rd-party integration
14. React The main React module for animations is the react-transition-group and it’s available as an npm package. npm i react-transition-group http://reactcommunity.org/react-transition-group/transition/
15. 3rd-party integration Playful JS hooks CSS partial support Difficult to extend Considerations
16. ? What about Vue.js API
17. TRANSI TION .03
18. How It Works You can use transition by wrapping components:
19. Enter classes opacity: 0 opacity: 1 v-enter v-enter-to v-enter-active
20. Leave classes opacity: 1 opacity: 0 v-leave v-leave-to v-leave-active
21. HTML CSS CSS-transition
22. DEMO DEMO https://codesandbox.io/s/143r23zx6l
23. HOOKS .04
24. Enter hooks opacity: 0 opacity: 1 @before-enter @after-enter @enter
25. Leave hooks opacity: 1 opacity: 0 @before-leave @after-leave @leave
26. How It Works Define your methods with transition attributes.
27. How It Works The done callbacks are required for the enter and leave hooks.
28. ? Why not REUSE THEM
29. Reusable transition
30. Reusable transition
31. MODES .05
32. How It Works You can use mode attributes with conditional rendered or dynamic components.
33. without mode SECOND CARD FIRST CARD
34. out-in mode SECOND CARD FIRST CARD
35. PAGE ANIM .06
36. How It Works vue-router give us a dynamic component called router-view that represents the current active component page. Wrap it in a transition and start playing!
37. https://codesandbox.io/s/50v005o6xl DEMO DEMO
38. Per-route transition vue-router allows us to define custom metas for each route. Give a different transitionName into meta and watch it later!
39. ? What about ANIMATIONS
40. Behind the idea Page beforeRouteLeave beforeRouteEnter Child 1 animateIn animateOut Child 2 ...
41. Enter animation
42. Leave animation
43. https://codesandbox.io/s/w0mkj98mk8 DEMO DEMO
44. RECAP .07
45. Transition goals Lean Bootstrap Reusable transitions CSS classes auto-apply 3rd-party friendly
46. Transition goals Playful JS hooks Transition modes Well documented
47. Resources https://vuejs.org/v2/guide/transitions.html https://css-tricks.com/intro-to-vue-5-animations/ https://router.vuejs.org/guide/advanced/transitions.html https://snipcart.com/blog/vuejs-transitions-animations https://dev.to/denisinvader/mounted-and-beforedestroy-hooks-in-vuejs-functional-components-7bi
48. Share KNOWLEDGE
49. THANK .YOU