h5实现仿微信那种页面切换时左右横滑的动画效果，页面前进时新页面从右往左滑，页面后退时旧页面从左往右滑。
(注：本文以vue为例)
一、思路分析
只实现路由切换动画很简单，只需要给路由出口router-view用transition元素包装一下，加上过渡样式即可：
<transition :name="myName">
<router-view/>
</transition>
但这里要实现的动画效果是页面前进后退不一样，问题的难点就在于如何区分页面前进和后退。
百度了一下，网上实现的方式千奇百怪，但大多都不是我想要的，我希望的效果是：
1.低侵入，不会对已有的代码造成影响；
2.使用方便，不需要额外配置，不会对以后写其他代码造成限制。
其实就是保证封装独立性和代码低耦合。
本文判断前进后退的思路也是借鉴了网上的代码，大概思路：
- vuex里定义一个数组arr，用于存储访问过的路由记录，再定义一个字符串str，用于标识前进或后退。
- 路由全局导航守卫beforeEach里，每访问一个路由时就判断一下，如果要访问的路由和上一页路由相同，就标识str为后退，不相同就标识str为前进，并同步路由记录到arr。
- 路由出口的transition name属性取值str标识，并定义好相应的过渡样式，这样就大概完成了。
二、区分前进后退
1、vuex部分
@/store/index.js
handleRouteChange 方法是在beforeEach导航守卫里使用。
{
state: {
directionName: '', // 页面切换方向：slide-left左滑前进，slide-right右滑后退
routeStack: [], // 存储路由栈
},
getters: {
directionName (state) {
return state.directionName || ''
},
routeStack (state) {
return state.routeStack || []
},
},
mutations: {
PUSH_ROUTE_STACK (state, route) {
state.routeStack.push(JSON.parse(JSON.stringify(route)))
},
POP_ROUTE_STACK (state) {
state.routeStack.pop()
},
SET_DIRECRTION_NAME (state, direction) {
state.directionName = direction
}
},
actions: {
// 记录页面前进/后退
handleRouteChange ({
getters, commit }, payload) {
const {
to, from } = payload
let len = getters.routeStack.length
if (len === 0) {
const homePath = '/home' // 项目首页的路由，换成你自己的
if (to.path === homePath) {
// 直接打开首页
commit('PUSH_ROUTE_STACK', to)
} else {
// 直接打开非首页
commit('PUSH_ROUTE_STACK', {
path: homePath })
commit('PUSH_ROUTE_STACK', to)
}
} else if (len === 1) {
// 先打开首页，再打开其他路由
commit('SET_DIRECRTION_NAME', 'slide-left')
commit('PUSH_ROUTE_STACK', to)
} else {
let lastBeforeRoute = getters.routeStack[len - 2]
if (lastBeforeRoute.path === to.path) {
// 打开上一页路由，后退
commit('POP_ROUTE_STACK')
commit('SET_DIRECRTION_NAME', 'slide-right')
} else {
// 前进
commit('PUSH_ROUTE_STACK', to)
commit('SET_DIRECRTION_NAME', 'slide-left')
}
}
}
}
}
2、路由配置部分
@/router/index.js
上述vuex部分的 homePath 就是这里配置的 /home 。
routes: [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
name: 'home',
component: () => import(/* webpackChunkName: "home" */ '@/views/home/index.vue'),
meta: {
title: '首页',
}
},
]
3、全局导航守卫
调用vuex里定义的 handleRouteChange 方法。
import router from '@/router'
import store from '@/store'
router.beforeEach((to, from, next) => {
store.dispatch('handleRouteChange', {
to, from })
next()
})
三、过渡动画
1、组件封装
这里我把transition过渡部分封装成了组件PageSlide：
<template>
<transition :name="directionName">
<slot></slot>
</transition>
</template>
<script>
import {
mapGetters } from 'vuex'
export default {
name: 'PageSlide',
computed: {
...mapGetters(['directionName'])
},
}
</script>
<style lang="less" scoped>
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
position: absolute;
width: 100%;
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.slide-left-enter,
.slide-right-leave-active {
opacity: 0;
transform: translate(100%, 0);
}
.slide-left-leave-active,
.slide-right-enter {
opacity: 0;
transform: translate(-100%, 0);
}
</style>
2、组件引用
在App.vue里的路由出口上包装一下。
<template>
<div id="app">
<PageSlide>
<router-view />
</PageSlide>
</div>
</template>
<script>
import PageSlidefrom '@/components/PageSlide'
export default {
name: 'App',
components: {
PageSlide,
},
}
</script>
四、其他
这一版暂且只作为思路分享吧，后续已经做了更加完善的重构版本v2，
请移步：h5页面路由切换动画-左右横滑效果（v2）
参考链接：
https://segmentfault.com/q/1010000007757306