如何實現切換頁面時的過渡動畫?

背景

今天在編寫頁面時,看到頁面沒有任何效果就只是直入直出,完全沒有一點逼格,所以想要實現類似於原生app的那種切換頁面時的特效,遂開始google,發現網上各種方案都是各有優缺點,於是整理了自認為優雅的方案並記錄下來.

實現難點

1. 如何判斷切換路由時是前進還是後退

2. 每次切換時向左向右切換動畫如何實現

解決方案

1. 我們需要給各個頁面定義層級,在切換路由時判斷使用者是進入哪一層頁面,如果使用者進入更高層級那麼做前進動畫,如果使用者退到低層級那麼做後退動畫.

router/index.js

import VueRouter from
 
 'vue-router'
import Home from '../components/home/home'
import User from '../components/user/user'

var router = new VueRouter({
    routes:[{
        name:'test',
        path:'/',
        meta:{index:0},//meta物件的index用來定義當前路由的層級,由小到大,由低到高
        component:{
            template:'<div>test</div>'
 

        }
    },{
        name:'home',
        path:'/home',
        meta:{index:1},
        component:Home
    },{
        name:'user',
        path:'/user/:id',
        meta:{index:2},
        component:User
    }]
});

1. 監控路由跳轉,判斷切換頁面之間的層級關係,並以此來判斷路由前進或者後退.

<template>
  <div id="app">
 

    <transition :name="transitionName">   
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
      return {
          transitionName:''
      }
  },
  watch: {//使用watch 監聽$router的變化
    $route(to, from) {
      //如果to索引大於from索引,判斷為前進狀態,反之則為後退狀態
      if(to.meta.index > from.meta.index){
        //設定動畫名稱
        this.transitionName = 'slide-left';
      }else{
        this.transitionName = 'slide-right';
      }
    }
  }
}
</script>

1. 編寫slide-left 和 slide-right 類的動畫

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

下面是 jsFiddle的演示程式碼