Vue-router: [question] how to create crossfade transition

Created on 14 Jan 2017  路  2Comments  路  Source: vuejs/vue-router

When switching views, I'd like to fadeOut the old page/fadeIn the new page at the same time.
Are there any examples somewhere? There's a lot of documentation around about transitions but I haven't found anything specifically on cross fading.

Most helpful comment

Hi, thanks for filing this issue, however the issue tracker is reserved for bug reports and feature requests only, please use gitter or forum or stackoverflowto ask questions. Thanks!


Simply define a crossfade transition and use it with router-view:

<transition name="crossfade">
  <router-view></router-view>
</transition>

All 2 comments

Hi, thanks for filing this issue, however the issue tracker is reserved for bug reports and feature requests only, please use gitter or forum or stackoverflowto ask questions. Thanks!


Simply define a crossfade transition and use it with router-view:

<transition name="crossfade">
  <router-view></router-view>
</transition>

Did you achieved it? I don't like I can't mix two routes view to crossfade smoothly, instead I'm getting view A fade to opacity 0, and then view B opacity to 1, but it's not crossfade, it's fade to white and then fade from white.

Was this page helpful?
0 / 5 - 0 ratings