奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > vue面试通 > 开源框架 >

开源vue轮子之vueg超酷的转场特效组件

时间:2017-12-15 15:40来源:未知 作者:admin
为 webApp 提供转场特效的开源 Vue 插件。 为vue-router添加转场效果,只需要Vue.use(vueg),即可获得转场效果,并能够根据url深度(/)和历史记录判断是前进和后退。 Demo示例: https://jaweii.gi


为 webApp 提供转场特效的开源 Vue 插件。
为vue-router添加转场效果,只需要Vue.use(vueg),即可获得转场效果,并能够根据url深度(/)和历史记录判断是前进和后退。

Demo示例:https://jaweii.github.io/vueg/example/dist/#/



github地址:https://github.com/jaweii/vueg



项目实战效果:


安装
通过NPM安装
$ 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已经具备默认的转场特效能力了。

配置项 / 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  
        shadow:true,                  //值为false,转场时没有阴影的层次效果
        disable: false,               //禁用转场动画,默认为false,嵌套路由默认为true  
    }  
    Vue.use(vueg, router,options)

 
2、`<router-view>`上添加v-transition="false",可以禁用动画,如
<template>
    <div id="app">
        <router-view v-transition="false"></router-view>
    </div>
</template>
其他:
1、基于vue v2.3.4版本和webkit内核浏览器开发、调试;
2、非新项目使用这个插件后,因为css问题,可能造成原本元素在转场动画时有些地方排版错乱,那就需要调整css;
3、每个路由匹配的组件模板高度最好大于等于屏幕高度,否则转场不好看,可以为`<router-view>` 添加class,设置`min-height:100%;`
4、插件20Kb左右大小,其中css 17Kb,如果想减小,可以编辑`vueg/css/animate.css` ,将不需要的动画样式删除,然后在`vueg/`下运行`npm install`-`gulp css`,即可;
5、配置项中`forwardAnim` 、 `backAnim` 的值本质上是css类名,所以你也可以自己写css动画,然后给定你自定义的类名作为值;
组件参数
名称 类型 默认值 说明
duration Number 0.3 动画时长
firstEntryDisable Boolean false 值为true时禁用首次进入的渐进动画
firstEntryDuration Number .6 首次进入渐进动画时长
forwardAnim String fadeInRight 前进动画
backAnim String fadeInLeft 后退动画
sameDepthDisable Boolean false url级别相同时禁用动画
tabs Array [] name填写对应路由的name,以实现类似app中点击tab页面水平转场效果,如tab[1]到tab[0],会使用forwardAnim动画,tab[1]到tab[2],会使用backAnim动画
tabsDisable Boolean false 值为true时,tabs间的转场没有动画
disable Boolean false 禁用转场动画

(责任编辑:admin)
顶一下
(2)
66.7%
踩一下
(1)
33.3%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
史密斯 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-24 11:11 最后登录:2018-07-15 11:07

关注奔三路小程序,方便你我他