为 webApp 提供转场特效的开源 Vue 插件
来源:互联网 发布:手机淘宝怎么求购 编辑:程序博客网 时间:2024/05/16 16:56
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动画,然后给定你自定义的类名作为值;
原文地址:https://github.com/jaweii/http://www.jqhtml.com/wp-content/uploads/2017/07/vueg#http://www.jqhtml.com/wp-content/uploads/2017/07/vueg
- 为 webApp 提供转场特效的开源 Vue 插件
- Adobe为QTP提供的Flex4插件
- 为Sublime Text提供的jQuery插件
- 如何为ionic webapp开发自定义插件
- Jquery Mobile转场特效
- 用vue实现简易的音乐webApp
- vue+vue-router转场动画
- JQuery插件: moreSelectors为jQuery提供更多的选择器
- 为 Vue 编写一个插件
- 为 Vue 编写一个插件
- CSDN开源夏令营 基于Compiz的switcher插件设计与实现之compiz特效插件介绍及特效实现
- cocos2dx 3.0转场景特效
- cocos2dx 3.0转场景特效
- 动画特效之转场动画
- 为开源项目提供捐助的未来
- vue实现webapp
- sublime text插件的安装与卸载——以Vue高亮插件为例
- 开源转场库HYBControllerTransitions
- 完全背包问题
- SQL Server 审计
- .NET Core跨平台的奥秘[下篇]:全新的布局
- MYSQL安装教程
- Python基础(一)
- 为 webApp 提供转场特效的开源 Vue 插件
- 每年读50本书,方法在此
- NOIP退役记
- 送签名书活动结果,另有新福利
- Triplet Loss(未开始)
- GEP基因表达式编程
- 编程计算100万过多少年可实现翻一番。
- Java IO 流总结
- exception模块