前言

现在移动端交互上越来越追求原生体验，最近做的App刚好需要做页面转场效果，类似微信的切换效果。

Vue2.0中transition组件的使用

Vue2.0提供了transition组件供我们使用，我们可以将页面嵌套到transition组件中，实现转场效果。在进入/离开的过渡中，会有6个class切换。

• v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
• v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。
• v-enter-to: 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
• v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
• v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。
• v-leave-to: 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

了解了以上状态之后，实际应用中我们只需要用到v-enter-active，v-leave-active。

App.vue

<div id="app" ><transition :name="transitionName"><router-view/></transition>
</div>
复制代码

定义slide-left，slide-right两种状态，分别表示页面向左滑动和向右滑动，即前进和后退的转场效果。

common.scss

.slide-left-enter-active {animation-name: slide-left-in;animation-duration: .3s;
}
.slide-left-leave-active {animation-name: slide-left-out;animation-duration: .3s;
}
.slide-right-enter-active {animation-name: slide-right-in;animation-duration: .3s;
}
.slide-right-leave-active {animation-name: slide-right-out;animation-duration: .3s;
}@keyframes slide-left-in {0% {transform: translate3d(100%, 0, 0);}100% {transform: translate3d(0, 0, 0);}
}@keyframes slide-left-out {0% {transform: translate3d(0, 0, 0);}100% {transform: translate3d(-100%, 0, 0);}
}@keyframes slide-right-in{0% {transform: translate3d(-100%, 0, 0);}100% {transform: translate3d(0, 0, 0);}
}
@keyframes slide-right-out  {0% {transform: translate3d(0, 0, 0);}100% {transform: translate3d(100%, 0, 0);}
}
复制代码

监听$route实现页面切换动画

在使用vue-router的应用中，路由对象都会被注入到每个组件中，可以通过this.$route获取当前的路由对象。页面切换的难点就在于，如何判断页面前进还是后退，看以下代码。

App.vue

watch: {// 监听路由切换转场动画$route(to, from) {const routeDeep = ['/', '/team', '/judge', '/finish', '/noData', '/info']const toDepth = routeDeep.indexOf(to.path)const fromDepth = routeDeep.indexOf(from.path)this.transitionName = toDepth > fromDepth ? 'slide-left' : 'slide-right'}
}
复制代码

在单页应用中，可以根据页面的层级定义出routeDeep，比如info页面就是属于二级页面，排在最后，其他为一级页面。当页面从一级跳转到二级，采用前进动画，二级跳转到一级，采用后退动画。暂不考虑复杂的嵌套页面的情况。

结语

代码创造世界，世界属于三体。后会有期。