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

最近再寫頁面的時候，感覺頁面之間的切換有點生硬，所以查了一下文檔看見了transition這個組建，很實用，故此在這里跟大家分享一下

---------------------------------------------------------

---------------------------------------------------------

---------------------------------------------------------

1、解決這個問題的難點就是如何來確定路由是前進還是后退的問題，下面是解決的方案

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

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
    }]
  }
});

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

<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>

編寫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);
}