vue手机商城项目实战（8）-路由跳转转场过渡动画效果实现

本文接：vue手机商城项目实战（7）-商品详情组件实现
我们发现在路由跳转的时候无论是点击底部选项卡，还是点击商品详情和搜索，页面跳转都比较生硬，因此我们可以考虑使用vue提供的转场效果来优化用户体验。

1、需要给router-view包裹transition，App.vue中修改如下：

2、在App.vue中data新增两个属性：

程序员导航

优网导航旗下整合全网优质开发资源，一站式IT编程学习与工具大全网站

立即访问

data(){
	return {
		// 转场名称
		transitionName:'slide-forward',
		// map集合存放route先后顺序
		map:new Map()
	}
}

3、App.vue侦听路由变化，根据是前进和后退实现不同的转场效果：

// 侦听路由变化
watch: {
	$route(to, from) {
		if (!this.map[to.path]) {
			// 过渡时间为0.5s
			this.map[to.path] = new Date().getTime() + 0.5;
		}
		if (!this.map[from.path]) {
			this.map[from.path] = new Date().getTime();
		}
		if (this.map[to.path] > this.map[from.path]) {
			this.transitionName = 'slide-forward';
		} else {
			this.transitionName = 'slide-back'
		}
	}
}

4、在App.vue的style中新增转场样式：

/* 路由转场样式 */
.slide-forward-enter {
	transform: translate(100%);
}
.slide-forward-enter-active {
	transition: all .5s ease-in-out;
}
.slide-forward-leave-active {
	transform: translate(-100%);
	transition: all .5s ease-in-out;
}
.slide-back-enter {
	transform: translate(-100%);
}
.slide-back-enter-active {
	transition: all .5s ease-in-out;
}
.slide-back-leave-active {
	transform: translate(100%);
	transition: all .5s ease-in-out;
}

[v_warn]注意：转场的组件需要时fixed固定定位，否则有可能导致转场效果异常[/v_warn]