vue2监听微信返回按钮仿微信切换动画

效果如下

GIF.gif

点击了浏览器默认返回按钮执行后退动画 其他执行前进动画
大致思路如下:
在vue中实现动画其实是很简单的,但是由于网上查找不到相关的浏览器默认返回按钮或者微信的返回按钮事件，所有只能是一个伪的监测返回事件
代码如下：

• 首先是先定义css动画 感谢vux的源码 我是一顿复制粘贴
  app.vue 文件

  .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);
    -webkit-transform: translate3d(100%, 0, 0);
  }

  .vux-pop-in-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
    -webkit-transform: translate3d(-100%, 0, 0);
  }

• 定义动画执行组件 此处的name应该是动态改变的
  app.vue 文件

   <transition :name="'vux-pop-'+ animate">
     <router-view class="router-view"></router-view>
   </transition>

• 定义name的值 那么此时我们需要用到vuex 如果你用其他也可以 个人习惯用vuex
  main.js 文件

const store = new Vuex.Store({});//也许这里你已经有其他vuex模块
store.registerModule('vux', { // 名字自己定义
  state: {
    animate: 'in',      // 动画状态  默认是进入
  },
  mutations: {   // 提交状态
    animateChange(state, payload){
      state.animate = payload.animate
    }
  }
});

• 重点来了 改变animate的状态 我们需要监测路由的状态
  main.js 文件

var routerArr = [];//  创建一个存储路由数组
router.beforeEach(function (to, from, next) {
  routerArr.push(to.path);//每次push路由
  if (routerArr[routerArr.length - 3] === to.path) {// 当如果要去的路径等于数组的倒数第二个路由 那么就是点        击了后退
    store.commit('animateChange', {
      animate: 'out' // 变成后退动画
    });
    routerArr.splice(routerArr.length - 2, 2) // 必须删除数组的倒数两位字符串
  } else {
    store.commit('animateChange', {
      animate: 'in' // 变成前进动画
    });
  }
}

这么做的话就可以实现切换的效果了 但是存在刷新数组被情况的情况 改成存在sessionStorage 里面就可以

• 最后拿到 animate 状态
  app.vue 文件

  import {mapState} from 'vuex' 
    computed: {
      ...mapState({
        animate: state => state.vux.animate // 拿到状态
      })
    }

也许有更好的解决办法 目前只能这么实现了
项目地址 https://github.com/yucccc/vue-vote