transitions.md

Transitions

Learn how to create route transitions with a free lesson on Vue School

Since the <router-view> is essentially a dynamic component, we can apply transition effects to it the same way using the <transition> component:

<transition><router-view></router-view></transition>

All transition APIs work the same here.

Per-Route Transition

The above usage will apply the same transition for all routes. If you want each route's component to have different transitions, you can instead use <transition> with different names inside each route component:

constFoo={template: ` <transition name="slide"> <div class="foo">...</div> </transition> `}constBar={template: ` <transition name="fade"> <div class="bar">...</div> </transition> `}

Route-Based Dynamic Transition

It is also possible to determine the transition to use dynamically based on the relationship between the target route and current route:

<!-- use a dynamic transition name --><transition:name="transitionName"><router-view></router-view></transition>

// then, in the parent component,// watch the `$route` to determine the transition to use watch: {'$route'(to,from){consttoDepth=to.path.split('/').lengthconstfromDepth=from.path.split('/').lengththis.transitionName=toDepth<fromDepth ? 'slide-right' : 'slide-left'}}

See full example here.