$30 off During Our Annual Pro Sale. View Details »

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/

Lorenzo Girardi

January 23, 2019
Tweet

More Decks by Lorenzo Girardi

Other Decks in Programming

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