[Vuejs]-Why Vue Router doesn't run javascript transition hooks sync?

I have solved it. Do not use multiple transitions for chaining. if you use css transition it is not problem. But if you use javascript transition it will not run as expected. So use transition on parent element which is “router-view”. if you want to change transition for each route, just check route.name with an if block and make a transition for specific route.

here is jsfiddle

const Home = { template: '<div>Home</div>',
methods:{
    enter:function(el, done){  
    TweenMax.from(el,2,{x:-60,onComplete:done});
  },
  leave:function(el, done){
    TweenMax.to(el,2,{x:60,onComplete:done});
  }
}
}
const Foo = { template: '<div>Foo</div>',
methods:{
    enter:function(el, done){  
    TweenMax.from(el,2,{x:-60,onComplete:done});
  },
  leave:function(el, done){
    TweenMax.to(el,2,{x:60,onComplete:done});
  }
}
}

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/foo', component: Foo }
  ]
})

new Vue({
    router,
  el: '#app',
  data: {
    msg: 'Hello World'
  },
  methods:{
    enter:function(el, done){  
    TweenMax.from(el,2,{x:-60,onComplete:done});
  },
  leave:function(el, done){
    TweenMax.to(el,2,{x:60,onComplete:done});
  }
}

})