Javascript Vue.js：为什么在滑动转换之间有一个白色屏幕，而不是下一个组件视图？

我正在为组件使用幻灯片转换，但在显示实际组件之前，滑动屏幕会显示几秒钟的白色。如何使其立即流向下一个视图

这是我在主app.vue路由器视图元素中包装的转换中使用的内容：

.slide-leave-active,
.slide-enter-active {
  transition: 0.5s;
}
.slide-enter {
  transform: translate(100%, 0);
}
.slide-leave-to {
  transform: translate(-100%, 0);
}

---

div
过渡（name=“slide”）
路由器视图

我认为这是因为vue router在完全删除前一个视图之前不会加载下一个视图。这会导致转换在创建下一个组件之前不显示任何内容。但是我不知道如何更改它。在vue router的转换示例中，它显示了一个附加到转换的

mode=“out-in”

您是否尝试将该指令添加到转换中？

<template lang="pug">
    div
        transition(name="slide")
            router-view
</template>