Skip to content
为Vue应用添加页面间的转场特效( Page level transition plugin for vue-router)
JavaScript CSS
Branch: master
Clone or download
Latest commit ee821d9 May 7, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
image 更新GIF Feb 3, 2019
src
.gitignore
.npmignore updated readme Jun 14, 2017
README.MD Update README.MD May 7, 2019
index.js
package.json 1.4.5 Feb 10, 2019

README.MD

996icu


Example:

使用方法

安装插件

npm i vueg --save

引入插件

import vueg from 'vueg'

Vue.use(vueg, new Router(), Options) // 传入实例化后的router, Options为可选的插件配置

插件指令

插件注册了名为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 默认为空情况下,vueg根据url深度判断是入场还是离场,但有时可能并不是你想要的效果,这时你可以使用map选项。
例子:`
map: {
 'user-login':{
    enter: ['user-register'],
    leave: ['index'],
    disable: ['user-login-sms']
  }
 }
 `
上面例子表示,从名为`user-login`的路由到名为`user-regiseter`的路由转场,使用入场动画,反之则使用离场动画。
从名为`user-login`的路由到名为`index`的路由转场,使用离场动画,反之则使用入场动画。
从名为`user-login`的路由到名为`user-login-sms`的路由转场,禁用转场动画。


enterleave 参数使用的animate.css的动画类名作为值,查看全部可用值,请访问:https://daneden.github.io/animate.css。 另外插件自带了一个可用值 touchPoint,动画效果为页面从触摸(点击)点放大入场。

You can’t perform that action at this time.