Vue-router: How to use transition when router matched?

[rayzang8]

I can't write transition on router-view like <router-view transition ="fade">`

so, how to use transition on this case？

[flaird]

Transitions are supported in <router-view></router-view>. This is a working example from my code:
<router-view transition="fade" transition-mode="out-in" class="animated"></router-view> using Animate.css and my transition registered as this:
Vue.transition('fade', { enterClass: 'fadeIn', leaveClass: 'fadeOut'})
It's also stated in the documentation: http://vuejs.github.io/vue-router/en/view.html

[rayzang8]

Thank you sagaio!
And I found the router configuration "transitionOnLoad" for this case

[Wipsly]

Where should I put this line?

Vue.transition('fade', { enterClass: 'fadeIn', leaveClass: 'fadeOut'})

I want the transition for all of my routes.

[aguegu]

@Wipsly just in the main.js, if you create the project by vue-cli.

[fnlctrl]

Closing since the issue is resolved.

[jamesduan]

very nice!