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

Answer 2

不知道你说的情况实在怎么样的情况，不过vux的loading的思路还是值得推荐的。
下面照搬原文的：https://vux.li/#/zh-CN/README...页面切换显示loading
移动端如果使用异步组件加载那么还是需要一点等待时间的，在网络慢时等待时间会更长。显示Loading状态缓解一下用户等待情绪就十分重要。

如果你使用vue-router和vuex，那么可以很容易实现。

首先，注册一个module来保存状态

const store = new Vuex.Store({}) // 这里你可能已经有其他 module

store.registerModule('vux', { // 名字自己定义
state: {

isLoading: false

},
mutations: {

updateLoadingStatus (state, payload) {
  state.isLoading = payload.isLoading
}

}
})
然后使用vue-router的beforeEach和afterEach来更改loading状态

router.beforeEach(function (to, from, next) {
store.commit('updateLoadingStatus', {isLoading: true})
next()
})

router.afterEach(function (to) {
store.commit('updateLoadingStatus', {isLoading: false})
})
在App.vue里使用loading组件并从vuex获取isLoading状态

<loading v-model="isLoading"></loading>
import { Loading } from 'vux'
import { mapState } from 'vuex'

export default {
components: {

Loading

},
computed: {

...mapState({
  isLoading: state => state.vux.isLoading
})

}
}

Answer 3

参考
https://segmentfault.com/q/10...