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} disableAtSameDepths 深度相同时禁用动画(通过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'],
disable: ['user-login-sms']
}
}
`
默认为{}。
GitHub:https://github.com/jaweii/Vueg----page-transition-plugin
vueg
官方网站：3
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。