Vueg - 爲 webApp 提供轉場特效的開源 Vue 插件

VUEG

爲vue-router添加轉場效果，只須要Vue.use(vueg)，便可得到轉場效果，並可以根據url級別(/)和歷史記錄判斷是前進和後退。

just need to add Vue.use(vueg) ,vue-router will have a transition effect.

---

效果圖 / Demo ：

live demo | GitHub

項目實戰效果：

---

使用方法 / Usage

0、安裝 / Installation

npm i vueg -G

一、引入插件 / Get Started

import Vue from 'vue' 
 import App from './App' 
 import router from './router'

 //  ↓↓↓↓↓↓↓↓↓↓↓↓
 import vueg from 'vueg'    
 import 'vueg/css/transition-min.css'
 Vue.use(vueg, router)     //←注意這一句應該在router實例化(router = new VueRouter({})以後

如今，app已經具有默認的轉場特效能力了。

二、<router-view>上添加v-transition="false"，能夠禁用動畫，如：

<template>
    <div id="app">
        <router-view v-transition="false"></router-view>
    </div>
</template>

---

配置項 / Config

const options={  
        duration: '0.3',              //轉場動畫時長，默認爲0.3，單位秒
        firstEntryDisable: false,     //值爲true時禁用首次進入應用時的漸現動畫，默認爲false  
        firstEntryDuration: '.6',     //首次進入應用時的漸現動畫時長，默認爲.6  
        forwardAnim: 'fadeInRight',   //前進動畫，默認爲fadeInRight  
        backAnim: 'fadeInLeft',       //後退動畫，默認爲fedeInLeft  
        sameDepthDisable: false,      //url深度相同時禁用動畫，默認爲false  
        tabs: [{
                name:'home'
            },{
                name:'my'
            }],                       //默認爲[]，name對應路由的name,以實現相似app中點擊tab頁面水平轉場效果，如tab[1]到tab[0]，會使用backAnim動畫，tab[1]到tab[2]，會使用forwardAnim動畫  
        tabsDisable: false,           //值爲true時，tabs間的轉場沒有動畫，默認爲false  
        disable: false,               //禁用轉場動畫，默認爲false，嵌套路由默認爲true    
    }  
    Vue.use(vueg, router,options)

forwardAnim 、 backAnim 提供如下值：
bounce
flash
pulse
rubberBand
shake
headShake
swing
....略...
slideInDown
slideInLeft
slideOutDown
slideOutLeft
slideOutRight
slideOutUp
預覽效果，以及查看所有可用值，請訪問：https://daneden.github.io/ani...

options還能夠在每一個組件的data中配置，舉例：

data(){
        return {
            vuegConfig:{  
                forwardAnim:'bounceInUp',  //options全部配置能夠寫在這個對象裏，會覆蓋全局的配置
                disable:false              //對於嵌套路由，默認爲關閉動畫，須要在組件的data.vuegConfig中配置disable爲false啓用
            }
    }
}

一些注意點：
一、基於vue v2.3.4版本開發、調試；
二、非新項目使用這個插件後，由於css問題，可能形成本來元素在轉場動畫時有些地方排版錯亂，那就須要調整css；
三、每一個路由匹配的組件模板高度最好大於等於屏幕高度，不然轉場很差看，能夠爲<router-view> 添加class，設置min-height:100%;
四、插件60Kb左右大小，其中css 57Kb，若是想減少，能夠編輯vueg/css/transition-min.css ，將不須要的動畫樣式刪除；