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頁面就是屬於二級頁面，排在最後，其餘爲一級頁面。當頁面從一級跳轉到二級，採用前進動畫，二級跳轉到一級，採用後退動畫。暫不考慮複雜的嵌套頁面的狀況。

結語

代碼創造世界，世界屬於三體。後會有期。