VUEG
爲vue-router添加轉場效果，只需要Vue.use(vueg)，即可獲得轉場效果，並能夠根據url深度(/)和歷史記錄判斷是前進和後退。
效果圖
live demo | GitHub
項目實戰效果：
使用方法
0、安裝
npm
i vueg -G |
1、引入插件
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已經具備默認的轉場特效能力了。
2、上添加v-transition=”false”，可以禁用動畫，如：
配置項 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頁面水平轉場效果，如tabs[1]到tabs[0]，會使用backAnim動畫，tabs[1]到tabs[2]，會使用forwardAnim動畫
tabsDisable:
false,
//值爲true時，tabs間的轉場沒有動畫，默認爲false
disable:
false,
//禁用轉場動畫，默認爲false，嵌套路由默認爲true
}
Vue.use(vueg,
router,options) |
forwardAnim 、 backAnim 提供以下值：
`touchPoint`
//頁面從觸摸點放大載入的轉場效果
以及animate.css中的值
`bounce`
`flash`
`pulse`
`rubberBand`
`shake`
`headShake`
`swing`
...略略略...
`slideInDown`
`slideInLeft`
`slideOutDown`
`slideOutLeft`
`slideOutRight`
`slideOutUp`
|
預覽效果，以及查看全部可用值，請訪問：https://daneden.github.io/animate.css
options還可以在每個組件的data中配置，舉例：
data(){ return
{ http://www.jqhtml.com/wp-content/uploads/2017/07/vuegConfig:{
forwardAnim:'bounceInUp',
//options所有配置可以寫在這個對象裏，會覆蓋全局的配置 disable:false
//對於嵌套路由，默認爲關閉動畫，需要在組件的data.http://www.jqhtml.com/wp-content/uploads/2017/07/vuegConfig中配置disable爲false啓用 } }} |
其他：
1、基於vue v2.3.4版本和webkit內核瀏覽器開發、調試；
2、非新項目使用這個插件後，因爲css問題，可能造成原本元素在轉場動畫時有些地方排版錯亂，那就需要調整css；
3、每個路由匹配的組件模板高度最好大於等於屏幕高度，否則轉場不好看，可以爲 添加class，設置min-height:100%;
4、插件20Kb左右大小,其中css 17Kb，如果想減小，可以編輯http://www.jqhtml.com/wp-content/uploads/2017/07/vueg/css/animate.css ，將不需要的動畫樣式刪除，然後在vueg/下運行npm install-gulp css，即可；
5、配置項中forwardAnim 、 backAnim 的值本質上是css類名，所以你也可以自己寫css動畫，然後給定你自定義的類名作爲值；
