vue路由切换的动画有空白时间段，这个时间段怎么去掉啊？

Question

路由切换时加了slide-up的动画，但是要等当前页面滑出屏幕的时候，下个页面才会开始滑进来，中间出现很长的空白期，请问这个要怎么改啊， 已经加了 mode='out-in'这个是部分代码beforeRouteUpdate: function (to, from, next) {    // 如果isBack为true时，证明是用户点击了回退，执行slide-down动画    let isBack = this.$router.isBack    if (this.isformRules) {      this.transitionName = 'fade'    } else {      if (isBack) {        this.transitionName = 'slide-down'      } else {        this.transitionName = 'slide-up'      }    }    // 做完回退动画后，要设置成前进动画，否则下次打开页面动画将还是回退    this.$router.isBack = false    this.isformRules = false    next()  }

Answer 1

你这空白是因为底层是空白吧。而且你的路由切换，是怎么切的，当前页面为什么要滑出屏幕？为什么不能下个页面直接滑进来？你是不是组件的切换？

如果路由切换，不妨在底层，或者

beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

写 loading