vueg 介绍
为 webApp 提供转场特效的开源 vue 插件
安装 插件npm i vueg --save
引入 插件 import vueg from 'vueg'vue.use(vueg,new Router(),Options) // 传入实例化后的router,和 插件 的全局配置 插件 指令插件 注册 了名为v-transition的指令,接收 一个 Options参数,其包含的配置优先级高于全局配置。
启用 插件 :为router-view 添加 v-transition指令后,该router-view下所有的 页面 都将启用动画:
<router-view v-transition></router-view>
或,为template中的顶级 标签 添加 v-transition指令后,该 页面 组件将启用动画 效果 :
<template>
<page v-transition>
</page>
</template>
支持 Nuxt。
Options
@property {number} duration 动画时长。 默 认为0.3
@property {string} enter 入场动画, 默 认为'fadeInRight'
@property {string} leave 离场动画, 默 认为'fadeInLeft'
@property {boolean} dis ableAtSameDepths 深度相同时禁用动画(通过url中的反斜杠 数量 /判断)。 默 认为false
@property {boolean} shadow 是否为入场 页面 添加 阴影。 默 认为true
@property {Object} map 有时候通过url判断的转场类型可能并不是你想要的,这时你可以使用map选项。
指定路由A到路由A/B/C的转场类型是enter还是leave,覆盖通过url深度判断的转场类型。
下面例子表示,从名为`user-login`的路由到名为`user-regiseter`的路由转场,使用入场动画,顺序反转则使用离场动画。
从名为`user-login`的路由到名为`index`的路由转场,使用离场动画,顺序反转则使用入场动画。
从名为`user-login`的路由到名为`user-login-sms`的路由转场,禁用转场动画。
例子:`
map: {
'user-login':{
enter: ['user-register'],
leave: ['index'],
dis able: ['user-login-sms']
}
}
`
默 认为{}。
网站地址 : 3
GitHub: https://github.com/jaweii/Vueg----page-transition-plugin
网站描述: 为Vue应用 添加 页面 间的 转场特效
vueg官方网站
官方网站: 3
如果觉得 网站内容还不错,欢迎将 网站 推荐给程序员好友。