Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Deep dive into vue.js transitions

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/

4ca7c621719678e8a8502ed44df4be1b?s=128

Lorenzo Girardi

January 23, 2019
Tweet

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