Web前端开发网

fly63.com

首页 资源 工具 文章 教程 栏目
  • 在线搜索
  • 文章标签
  • 广告合作
  • 赞助一下
  • 关于我们
资源推荐
茅茅虫
茅茅虫AI论文写作助手,AIGC论文查重
美图设计室
AI智能一键生成海报,免费平面设计
我要自学网
免费视频教程,提供全方位软件学习
AI提示词商城
AI提示词交易与管理平台,提升效率
AiPPT
全智能AI一键生成 PPT
阿里云优惠券
卓越的云计算技术和服务提供商
LiblibAI
一站式AI内容创作生成平台,原创AI模型分享社区
堆友AI
零门槛,多风格AI绘画免费生成,电商海报设计神器
即梦AI
一站式智能创作平台,即刻造梦
硅云优惠券
领先的基础云计算服务提供商,PHP云虚拟主机第一品牌

资源分类

AI智能 酷站推荐 招聘/兼职 框架/库 模块/管理 移动端UI框架 Web-UI框架 Js插件 Jquery插件 CSS相关 IDE环境 在线工具 图形动效 游戏框架 node相关 调试/测试 在线学习 社区/论坛 博客/团队 前端素材 图标/图库 建站资源 设计/灵感 IT资讯
网站收录 / 问题反馈

vueg

分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:3
GitHub:https://github.com/jaweii/Vueg----page-transition-plugin
网站描述:为Vue应用添加页面间的转场特效
访问官网
GitHub

为 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']
  }
 }
 `
 默认为{}。

仅供个人学习参考/导航指引使用,具体请以第三方网站说明为准,本站不提供任何专业建议。如果地址失效或描述有误,请联系站长反馈~感谢您的理解与支持!

链接: https://fly63.com/nav/1436

更多»
热门资源
React Native
Facebookt推出基于 React 的创建跨平台移动应用开发框架
官网
GitHub
uni-app
使用 Vue.js开发跨平台应用的前端框架
官网
GitHub
Flutter
谷歌推出的跨平台移动UI框架
官网
GitHub
framework7
用于开发接近原生iOS或Android系统外观和体验的 hybrid mobile apps 或 web apps
官网
GitHub
ionic
ionic是一个用来开发混合手机应用的,开源的,免费的代码库
官网
GitHub
weex
阿里推出的Native框架,支持iOS、安卓、YunOS及Web等多端部署
官网
GitHub
Taro
多端统一开发框架,生成能运行在微信小程序、H5、React Native 等的应用
官网
GitHub
React Belle
一个React组件库
官网
GitHub
noUiSlider
一个轻量级的Js范围滑块库
官网
GitHub
mavonEditor
基于vue的markdown编辑器
点击进入
GitHub
fair ui
为Flutter设计的动态化框架
官网
GitHub
react-native-ui-lib
React Native的UI组件库和工具集
官网
GitHub
类似于vueg的资源
jquery-weui
专为微信公众账号开发而设计的一个简洁而强大的UI库
官网
GitHub
PiUI
基于uniapp,高质量UI移动组件库
官网
GitHub
vum
手机 webapp 打造的基于 Vue.js 构建的UI框架
官网
GitHub
antmove
蚂蚁搬家工具,让小程序跨平台开发变得简单
官网
GitHub
mand-mobile
面向金融场景的Vue移动端UI组件库
官网
GitHub
Weex Ui
一个基于 Weex 的富交互、轻量级、高性能的 UI 组件库
官网
GitHub
pulltorefresh.js
移动端下拉刷新Js库
官网
GitHub
cordova
使用HTML, CSS &amp; JS进行移动App开发,多平台共用一套代码
官网
目录

手机扫一扫预览

》
分享组件加载中...
首页 技术导航 在线工具 技术文章 教程资源 前端标签 AI工具集 前端库/框架 实用工具箱 广告合作 关于我们

Copyright © 2018 Web前端开发网提供免费在线工具、编程学习资源(教程/框架/库),内容以学习参考为主,助您解决各类实际问题,快速提升专业能力。