VUE单页面切换动画(全网最好的切换效果)

// 视图切换动画逻辑
let history = window.sessionStorage
let historyCount = history.getItem('count') * 1 || 0
function routerTransition (to, from) {
  const toIndex = history.getItem(to.name)
  const fromIndex = history.getItem(from.name)
  let direction = 'forward'
  if (toIndex) {
    if (toIndex >= fromIndex || !fromIndex) {
      store.commit('UPDATE_DIRECTION', {direction})
    } else {
      direction = 'reverse'
      store.commit('UPDATE_DIRECTION', {direction})
    }
  } else {
    ++historyCount
    history.setItem('count', historyCount)
    to.path !== '/' && history.setItem(to.name, historyCount)
    direction = 'forward'
    store.commit('UPDATE_DIRECTION', {direction})
  }
}
router.beforeEach(function (to, from, next) {
  routerTransition(to, from)
  next()
})






你可能感兴趣的:(VUE单页面切换动画(全网最好的切换效果))