Vue实现仿微信，如飘柔般顺滑的页面转场动画

前言

现在移动端交互上越来越追求原生体验，最近做的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页面就是属于二级页面，排在最后，其他为一级页面。当页面从一级跳转到二级，采用前进动画，二级跳转到一级，采用后退动画。暂不考虑复杂的嵌套页面的情况。

结语

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