Vue-router: Change dynamically visual transitions based on transition.from and to transition.to

[lbineau]

Vue.js & vue-router.js version

1.0.20, 0.7.12

Reproduction Link

http://codepen.io/lbineau/pen/XdBMwG

What is Expected?

I want to dynamically change the visual transition between pages, according to the page I am and the page I'm going.

What is actually happening?

I'm using the beforeEach hook to change the visual transition with the "transition.from" and "transition.to" parameters.
The leaving component has the old transition and the entering component has the new transition.

Am I doing something wrong or is there another way to do it ?

[simplesmiler]

Check out https://jsfiddle.net/crswll/4emwdkv3/12/

[lbineau]

@simplesmiler Thanks for reply so fast. This hack is really smart and works very well, but what about if I want also to dynamise the transition-mode ? (in-out out-in)

[lbineau]

I found the solution, just call the transition.next into Vue.nextTick in order to wait Vue refresh all the variable before continuing the transition.

Vue.nextTick(transition.next);

updated demo: http://codepen.io/lbineau/pen/QNBMdv