jaweii / Vueg Page Transition Plugin
为Vue应用添加页面间的转场特效( Page level transition plugin for vue-router)
Stars: ✭ 1,023
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Vueg Page Transition Plugin
vue-router-view-transition
Properly time out-in transitions with scrollBehavior
Stars: ✭ 38 (-96.29%)
Mutual labels: transition, vue-router
Antvueblogfront
🔥使用Vue全家桶 + Egg + Mongodb 写的个人网站博客。使用docker compose 一键部署。(最近比较忙,部署还有点问题,后期补上)
Stars: ✭ 36 (-96.48%)
Mutual labels: vue-router
React Whirligig
A react carousel/slider like component for sequentially displaying slides or sets of slides
Stars: ✭ 20 (-98.04%)
Mutual labels: transition
Vue Auth Boilerplate
🔑 Vue.js scalable boilerplate with user authentication.
Stars: ✭ 31 (-96.97%)
Mutual labels: vue-router
Vue Chatroom
Vue全家桶 + socket.io + express 搭建的聊天室+ 智能问答助手
Stars: ✭ 27 (-97.36%)
Mutual labels: vue-router
Enso
Laravel Vue SPA, Bulma themed. For demo login use `[email protected]el-enso.com` & `password` -
Stars: ✭ 959 (-6.26%)
Mutual labels: vue-router
Vue Cli3.0 Vueadmin
基于vue-cli3.0+vue+elementUI+vuex+axios+权限管理的后台管理系统
Stars: ✭ 1,002 (-2.05%)
Mutual labels: vue-router
Docker Vue Node Nginx Mongodb Redis
🐉 An awesome boilerplate, Integrated Docker, Vue, Node, Nginx, Mongodb and Redis in one, Designed to develop & build your web applications more efficient and elegant.
Stars: ✭ 34 (-96.68%)
Mutual labels: vue-router
Collectionviewpaginglayout
a simple but highly customizable paging layout for UICollectionView.
Stars: ✭ 947 (-7.43%)
Mutual labels: transition
Vuejs Interview Questions
List of 300 VueJS Interview Questions And Answers
Stars: ✭ 948 (-7.33%)
Mutual labels: vue-router
Jtmaterialtransition
An iOS transition for controllers based on material design.
Stars: ✭ 966 (-5.57%)
Mutual labels: transition
Vue Architecture Boilerplate
Vue.js architecture for front-end projects at @NOALVO
Stars: ✭ 40 (-96.09%)
Mutual labels: vue-router
Vue Firebase Starter
boilerplate of vue/vuex/vue(x)-router, with sass/prerendering, muse-ui, and firebase/firebaseui
Stars: ✭ 43 (-95.8%)
Mutual labels: vue-router
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`的路由转场,禁用转场动画。
enter
、leave
参数使用的animate.css的动画类名作为值,查看全部可用值,请访问:https://daneden.github.io/animate.css。
另外插件自带了一个可用值 touchPoint
,动画效果为页面从触摸(点击)点放大入场。
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].