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

你这空白是因为底层是空白吧。而且你的路由切换，是怎么切的，当前页面为什么要滑出屏幕？为什么不能下个页面直接滑进来？你是不是组件的切换？如果路由切换，不妨在底层，或者beforeRouteEnterbeforeRouteUpdate (2.2 新增)beforeRouteLeave写 loading