视频加载中...

<transition :name="transition">	<router-view class="router-view" /></transition>

首先定义好路由过渡时前进和后退用到的css动画

<style>	.router-view {		width: 100%;		height: 100%;		position: absolute;		top: 0;		bottom: 0;		margin: 0 auto;		overflow-y: auto;		overflow-x: hidden;		-webkit-overflow-scrolling: touch;		z-index: 1;	}	.slide-right-enter-active,	.slide-right-leave-active,	.slide-left-enter-active,	.slide-left-leave-active {		height: calc(100% - 45px);		will-change: transform;		transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);		position: absolute;		backface-visibility: hidden;		perspective: 1000;	}	.slide-right-enter,	.slide-right-enter-active {		animation: bounce-left-in 300ms;	}	.slide-right-leave-active {		animation: bounce-left-out 300ms;	}	.slide-left-enter,	.slide-left-enter-active {		animation: bounce-right-in 300ms;	}	.slide-left-leave-active {		animation: bounce-right-out 300ms;	}	@keyframes bounce-right-in {		0% {			transform: translate3d(100%, 0, 0);		}		100% {			transform: translate3d(0px, 0, 0);		}	}	@keyframes bounce-right-out {		0% {			opacity: 1;			transform: translate3d(0, 0, 0);		}		100% {			opacity: 0;			transform: translate3d(-100%, 0, 0);		}	}	@keyframes bounce-left-in {		0% {			opacity: 0;			transform: translate3d(-100%, 0, 0);		}		100% {			opacity: 1;			transform: translate3d(0px, 0, 0);		}	}	@keyframes bounce-left-out {		0% {			opacity: 1;			transform: translate3d(0, 0, 0);		}		100% {			opacity: 0;			transform: translate3d(100%, 0, 0);		}	}</style>

定义完css样式后，需要监听路由变化，动态修改transition标签上name的属性值。

watch: {		$route(to, from) {			let isBack = eval(sessionStorage.getItem('isBack'));			isBack ? this.transition = 'slide-right' : this.transition = 'slide-left';			this.timeout = setTimeout(()=>{				sessionStorage.setItem('isBack', false);				this.timeout && clearTimeout(this.timeout);			},0)		}	}

区分前进路由和后退路由的原理是在vuex里维护一个变量isBack，isBack默认等于false，当isBack为false时是前进路由，为true时是后退路由；

页面上点击元素跳转路由都可以当作前进路由来处理，后退路由的触发只有两个地方，一个是顶部标题栏上的后退按钮，另一个是浏览器的后退按钮。当用户点标题栏上的后退按钮或者浏览器的后退按钮时，将isBack这个变量置为true，在watch中，修改完transition标签的name值之后，将isBack属性置为false；标题栏上的后退按钮可以自定义后退事件，浏览器的后退需要监听popstate事件；

window.addEventListener('popstate',		sessionStorage.setItem('isBack', true);	},false);