Why Vue Router doesn't run javascript transition hooks sync? - vue.js

Question

I am new in vue router and vue.js. I just try to use javascript transitions on vue-router. Why beforeLeave event doesn't fire before route change ? But it is working as expected with css transitions. it works great with css transitions. But it doesn't work with javascript transitions... Here is jsfiddle example...enter method works as expected. but beforeLeave method doesn't work as expected and has no transition chain between routes. Please help..
jsfiddle
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<div id="app">
<router-link to="/">/home</router-link>
<router-link to="/foo">/foo</router-link>
<router-view></router-view>
</div>
and this is js
const Home = { template: '<transition v-on:enter="enter" v-on:leave="leave" ><div>Home</div></transition>',
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: '<transition v-on:enter="enter" v-on:leave="leave" ><div>Foo</div></transition>',
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'
}
})

Answer 1

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});
}
}
})