路由之间的延迟转换

Question

我想在点击打开新路线的链接时触发下一页之前进行延迟。

所以我希望当前页面淡出 - 然后在开始下一页的淡入之前稍等片刻。

下面的当前转换使用 Animate.css 的 Fade 库。

<transition leave-active-class="animated fadeOut" enter-active-class="animated fadeInDown">
    <router-view></router-view>
</transition>

它工作得很好，但是页面的变化太快了。两条路线相互交叉/淡入。

我想要一个干净的淡出 -> 完全空白 -> 然后打开新页面。

如何做到这一点？

Answer 1

您应该将转换模式从默认更改为out-in (https://vuejs.org/v2/guide/transitions.html#Transition-Modes)

<transition 
  mode="out-in" 
  leave-active-class="animated fadeOut" 
  enter-active-class="animated fadeInDown">
    <router-view></router-view>
</transition>