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
   

   View Slide

2. Lorenzo
   Girardi
   Frontend Developer
   CAFFEINA
   www.giralo.me
   

   View Slide

3. PSST
   WE’RE
   HIRING
   https://caffeina.com/jobs
   

   View Slide

4. INTRO
   .01
   

   View Slide

5. Animations
   Transitions
   Differences Between
   

   View Slide

6. Transition
   A transition occurs when
   an element changes from
   one state to another.
   

   View Slide

7. Animation
   Animations can be made up of as many
   in-between states, and offer more control
   over how the states are animated.
   

   View Slide

8. ?
   When do we
   NEED THEM
   

   View Slide

9. When to use
   State changes
   Component mounts
   Page changes
   UX Interactions
   

   View Slide

10. Don’t use animations
    if they are not
    helping anyone
    

    View Slide

11. COMP
    ARE
    .02
    

    View Slide

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
    

    View Slide

13. Considerations
    Well documented
    Timeline animations
    No CSS transition support
    3rd-party integration
    

    View Slide

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/
    

    View Slide

15. 3rd-party integration
    Playful JS hooks
    CSS partial support
    Difficult to extend
    Considerations
    

    View Slide

16. ?
    What about
    Vue.js API
    

    View Slide

17. TRANSI
    TION
    .03
    

    View Slide

18. How It Works
    You can use transition by wrapping components:
    

    View Slide

19. Enter classes
    opacity: 0 opacity: 1
    v-enter v-enter-to
    v-enter-active
    

    View Slide

20. Leave classes
    opacity: 1 opacity: 0
    v-leave v-leave-to
    v-leave-active
    

    View Slide

21. HTML CSS
    CSS-transition
    

    View Slide

22. DEMO
    DEMO
    https://codesandbox.io/s/143r23zx6l
    

    View Slide

23. HOOKS
    .04
    

    View Slide

24. Enter hooks
    opacity: 0 opacity: 1
    @before-enter @after-enter
    @enter
    

    View Slide

25. Leave hooks
    opacity: 1 opacity: 0
    @before-leave @after-leave
    @leave
    

    View Slide

26. How It Works
    Define your methods with transition attributes.
    

    View Slide

27. How It Works
    The done callbacks are required for the enter and leave
    hooks.
    

    View Slide

28. ?
    Why not
    REUSE THEM
    

    View Slide

29. Reusable transition
    

    View Slide

30. Reusable transition
    

    View Slide

31. MODES
    .05
    

    View Slide

32. How It Works
    You can use mode attributes with conditional rendered or
    dynamic components.
    

    View Slide

33. without mode
    SECOND CARD
    FIRST CARD
    

    View Slide

34. out-in mode
    SECOND CARD
    FIRST CARD
    

    View Slide

35. PAGE
    ANIM
    .06
    

    View Slide

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!
    

    View Slide

37. https://codesandbox.io/s/50v005o6xl
    DEMO
    DEMO
    

    View Slide

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!
    

    View Slide

39. ?
    What about
    ANIMATIONS
    

    View Slide

40. Behind the idea
    Page
    beforeRouteLeave
    beforeRouteEnter
    Child 1
    animateIn
    animateOut
    Child 2
    ...
    

    View Slide

41. Enter animation
    

    View Slide

42. Leave animation
    

    View Slide

43. https://codesandbox.io/s/w0mkj98mk8
    DEMO
    DEMO
    

    View Slide

44. RECAP
    .07
    

    View Slide

45. Transition goals
    Lean Bootstrap
    Reusable transitions
    CSS classes auto-apply
    3rd-party friendly
    

    View Slide

46. Transition goals
    Playful JS hooks
    Transition modes
    Well documented
    

    View Slide

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
    

    View Slide

48. Share
    KNOWLEDGE
    

    View Slide

49. THANK
    .YOU
    

    View Slide