效果如下
点击了浏览器默认返回按钮执行后退动画 其他执行前进动画 这里录制的时候没录制到鼠标轨迹
大致思路如下:
在vue中实现动画其实是很简单的,但是由于网上查找不到相关的浏览器默认返回按钮或者微信的返回按钮事件,所有只能是一个伪的监测返回事件
代码如下:
首先是先定义css动画 感谢vux的源码 我是一顿复制粘贴
app.vue 文件123456789101112131415161718192021.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 文件123<transition :name="'vux-pop-'+ animate"><router-view class="router-view"></router-view></transition>定义name的值 那么此时我们需要用到vuex 如果你用其他也可以 个人习惯用vuex
main.js 文件1234567891011const store = new Vuex.Store({});//也许这里你已经有其他vuex模块store.registerModule('vux', { // 名字自己定义state: {animate: 'in', // 动画状态 默认是进入},mutations: { // 提交状态animateChange(state, payload){state.animate = payload.animate}}});重点来了 改变animate的状态 我们需要监测路由的状态
main.js 文件1234567891011121314var 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 文件123456import {mapState} from 'vuex'computed: {...mapState({animate: state => state.vux.animate // 拿到状态})}
也许有更好的解决办法 目前只能这么实现了