[Vuejs]-Vue page transition with Vue-Router

by

0👍

You can use Router Meta Fields to know which animation you should apply.
On routes declaration, you can add meta fields for each route. E.g:

const router = new VueRouter({
  routes: [
    {
      path: '/default',
      component: SomeComponent
    },
    {
      path: '/special',
      component: SomeComponent2,
      // meta fields
      meta: { 
          animation: 'special'
      }
    }
  ]
})

Then on your components, you can do this:

 methods: {
   enter(el, done) {
     if (this.$route.meta.animation === 'special') {
         // apply special animation
     } else {
        // main page animation with a timeline using Greensock
     }
   },
   leave(el, done) { 
     // main page animation with a timeline using Greensock
   }
 }

You can find more information about vue-router meta fields here.

👤TFC

Leave a comment