延迟路线之间的转换

Question

我想在单击打开新路线的链接时延迟触发下一页。

所以我希望当前页面淡出-然后等待一秒钟，然后开始下一页的fadeIn。

下面使用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>