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/

Lorenzo Girardi

January 23, 2019

More Decks by Lorenzo Girardi

Other Decks in Programming


  1. Animation Animations can be made up of as many in-between

    states, and offer more control over how the states are animated.
  2. 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
  3. 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/
  4. 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!
  5. Per-route transition vue-router allows us to define custom metas for

    each route. Give a different transitionName into meta and watch it later!