vue页面转场动画思考

百度找了一些效果 但是都不能满意 于是就有了这一期

使用过的方法

1. vueg 一个转场的插件 但是他有BUG 于是作罢
2. 百度上抄的一个效果 也不知道是不是我尝试的时候漏掉了什么还是作者漏贴了一部分代码 没办法复现出他的效果 所以失败

思路

仿vux的转场

vux的专场算是比较优秀的了 展示的图片我就不放了 网上一搜一大堆

思路

1. 在session中保存to以及from两个页面路径以及访问页面访问的顺序
2. 路由跳转的时候判断toIndex以及fromIndex 获取在session中他们的序号 进行跳转

代码

1. app.vue

  


// 转场动画
.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
  will-change: transform;
  transition: all 500ms;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  perspective: 1000;
}
.vux-pop-out-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.vux-pop-out-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.vux-pop-in-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.vux-pop-in-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

2. vuex

setPageChange (state, direction) {
  state.direction = direction
}
// 页面切换效果
direction: 'forward',

3. router.js

const history = window.sessionStorage
let historyCount = history.getItem('historyCount')
let direction = 'forward'
if (!historyCount) {
// 没有值的情况下初始化
  historyCount = 0
  history.setItem('historyCount', historyCount)
}
// 路由前置检测
router.beforeEach((to, from, next) => {
  let fromIndex = history.getItem(from.path)
  let toIndex = history.getItem(to.path)
  if (to.path) {
    // 页面在session中没有记录 那么添加一条 记录当前页面层级
    if (!history.getItem(to.path)) {
      historyCount++
      history.setItem(to.path, historyCount)
      history.setItem('historyCount', historyCount)
      toIndex = historyCount
    } else {
      // 如果有 不更新记录
      toIndex = history.getItem(to.path)
    }
  }
  if (toIndex >= fromIndex) {
    direction = 'forward'
  } else {
    direction = 'back'
  }
  // 更新页面效果
  store.commit('setPageChange', direction)
  return next()
})

其实vux源码中关于这个功能还做了很多其他的判断 比如ios上的手势操作判断 但是我现在还没有遇到问题 就暂时不去尝试了 等在真机调试遇到问题的时候 会再完善这段代码