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 ，将不须要的动画样式删除；