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
1、引入插件 / 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已经具备默认的转场特效能力了。
2、<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启用}}
}
一些注意点:
1、基于vue v2.3.4版本开发、调试;
2、非新项目使用这个插件后,因为css问题,可能造成原本元素在转场动画时有些地方排版错乱,那就需要调整css;
3、每个路由匹配的组件模板高度最好大于等于屏幕高度,否则转场不好看,可以为<router-view>
添加class,设置min-height:100%;
4、插件60Kb左右大小,其中css 57Kb,如果想减小,可以编辑vueg/css/transition-min.css
,将不需要的动画样式删除;
Vueg - 为 webApp 提供转场特效的开源 Vue 插件相关推荐
- Vueg - 为webApp提供专场特效的开源Vue插件
VUEG 为vue-router添加转场效果,只需要Vue.use(vueg),即可获得转场效果,并能够根据url级别(/)和历史记录判断是前进和后退 just ned to add Vue.use( ...
- EDIUS转场特效插件下载v10.1.0.577免费版
EDIUS转场特效插件是一款专门为EDIUS提供转场特效的插件,安装此插件后可以拥有视频特效和场景转换等功能,有需要的朋友可以来试试哦. 插件简介: VitaScene包含两类插件:一类是视频转场插件 ...
- 视频剪切合并器如何剪辑下载的MP4电影并添加转场特效
对于经常制作短视频的我们来说,做出的视频不仅要完美表达出视频内容,有时还需要加入一些视频特效.尤其是当我们使用几段素材剪辑成一段视频时,加转场特效不仅可以让视频内容更加丰富,而且可以使两个视频片段在切 ...
- proDAD Adorage会声会影视频特效库插件,转场特效软件,魔术转场插件辅助工具
proDAD Adorage,视频特效库插件,魔术转场插件,魔术转场辅助工具,全系列视频转场特效软件. proDAD Adorage 是一款一体化的效果库,完美拥有所有的效果,集所有Adorage卷于 ...
- pr扫光转场插件_2020年最新pr转场特效:300套模板+200集视频教程+插件,送你参考...
作为职场小白,如何正确有效的学习好PR剪辑?这是很多新手在入门阶段所迷茫的,PR本身是一款专业的视频剪辑,后期转场,视频特效软件,有很多专业人士在使用也有很多爱好者或需求不是很大的朋友们使用. 学习p ...
- Jquery Mobile转场特效之slide | 小小iPhone开发
Jquery Mobile转场特效之slide | 小小iPhone开发 2012 Jquery Mobile转场特效之slide 作者:小小 发布:2012-12-12 14:03 分类:j ...
- MOGRT视频制作库 Premiere遮罩/转场/特效视频剪辑效果模板库预设
视频制作库 Premiere遮罩/转场/特效视频剪辑效果库 Premiere Pro CC |无需插件|可调整大小| 2.95 Gb 超过1000种专业预设和后效元素.视频库包含超过250种随时可用的 ...
- 教你快速给多段视频添加同一个片尾和转场特效
在剪辑视频的时候,难免会想要添加片尾,而为了过渡自然,可以在两个视频之间添加一个转场特效,那么该如何实现这样一个效果呢?下面随小编一起来试试. 材料准备: 视频剪辑高手 多段视频素材 步骤演示: 运行 ...
- 175.纯 CSS 实现视频转场特效
效果 (源码网盘地址在最后) 源码 index.html <!DOCTYPE html> <html lang="en"><head><m ...
最新文章
- oracle存储过程的基本语法
- OneAPM挂牌新三板,续写ITOM新篇章
- haproxy mysql配置文件详解_HAProxy基础配置-haproxy的配置文件说明
- Android 系统添加SELinux权限
- 【程序5】 题目:利用条件运算符的嵌套来完成此题:学习成绩=90分的同学用A表示,60-89分之间的用B表示,60分以下的用C表示。 1.程序分析:(ab)?a:b这是条件运算符的基本例子。...
- 程序员从入门到升级,或许可以看一看这几个公众号
- Python3实现红黑树[上篇]
- 牛客20701 神秘钥匙
- 计算机科学 高中研究项目,高中信息科技教学中渗透计算机科学史的实践研究...
- 对象序列化时候无法创建类似如此(king:astar)的元素名
- 函数命名空间,函数的名字
- 电话机器人源码,语音电话机器人
- web——html个人简历
- 差分技术:LVDS(低电压差分信号)
- WKWebView OC与JS交互
- java integer long 转换_java - 将Integer转换为Long
- 数学中奇妙的“金蝉脱壳”(转)
- 零基础如何快速入门微信小游戏开发?
- 【原创】【SPI】SPI通信协议介绍
- ROS发布静态tf变换
热门文章
- 七夕这个早上,全都用来挖Filecoin了
- Matlab中的Figure中的图导出为eps格式后字体和线条不一样粗细
- 抗干扰的接地处理及屏蔽处理[转载]
- 基于java班主任管理系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署
- Ardiuno与超声波传感器的使用
- navicat数据插入失败一种原因(1062 Duplicate entry)
- CRM成功部署的关键点是什么
- Markdown KaTeX 蝴蝶结符 ⋈
- python头像动漫化_Python头像动漫化,快来生成一个自己的动漫头像吧
- C语言关键字之C89、C99、C11