vue 轉場

整理了網上的一些轉場效果的方案並記錄下來.

一 VUEG

（地址）https://github.com/jaweii/vueg
這個組件能夠支持不少效果，可是有個缺點就是沒法支持嵌套路由的轉場，所以有了下面的第二個辦法

二 自定義層級和動畫

咱們須要給各個頁面定義層級,在切換路由時判斷用戶是進入哪一層頁面,若是用戶進入更高層級那麼作前進動畫,若是用戶退到低層級那麼作後退動畫.

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 300ms;
  position: fixed;
}
.slide-right-enter {
    // opacity: 0;
    transform: translate(-100%, 0);
    transition-timing-function:ease-in;
}
.slide-right-leave-active {
    // opacity: 0;
    // 安卓手機上同時進行離開和進入會出現閃白現象，暫時不啓用離開動畫
    // transform: translate(100%, 0);
    // transition-timing-function:    cubic-bezier(0.5,0,1,1);
}
.slide-left-enter {
    // opacity: 0;
    transform: translate(100%, 0);
    transition-timing-function:ease-in;
}
.slide-left-leave-active {
    // opacity: 0;
    // 安卓手機上同時進行離開和進入會出現閃白現象，暫時不啓用離開動畫
    // transition-timing-function:    cubic-bezier(0.5,0,1,1);
  // transform: translate(-100%, 0);
}