账户中心 退出系统
新版手册 weex旧版
快速开始
常见问题
快速部署
组件调用
更新日志
版权要求
基础布局 ( 4 )
页面布局从这开始哦 (:
Flex布局组件形式
Flex布局样式形式
元素定位
基础样式 ( 8 )
文本颜色
背景样式
阴影效果
圆角边框
文本样式
内置图标
图标扩展
样式动画
常用布局 ( 31 )
宫格布局九宫格
头部导航
底部导航
切换导航更新居中模式
吸顶容器
动态吸顶
搜索组件
通用列表
滑动列表
新闻列表
评论列表
图文卡片
名片卡片
滚动区域
遮罩弹层
局部选项卡
全屏选项卡原理演示
全屏选项卡实战演示
分段切换
折叠面板
普通表格
数据表格
分类展示
横向公告
返回顶部
弹出菜单
功能菜单
时间轴
侧边抽屉
图标分类
横向日期
刷新与加载 ( 5 )
加载组件
全屏加载
下拉刷新原生模式
刷新组件滚动区域模拟模式
上拉加载原生模式
常用组件 ( 24 )
徽章组件
标签组件
滚动公告
无缝滚动
按钮组件
进度按钮
星级评价
通用标题更多、换一批
倒计时
轮播组件组件模式
轮播组件原生模式
日历时间
区间滑块
进度圆环
城市选择
地区联动新版本 更灵活
步骤提示
链接组件
优惠券组件
为空展示
图片选择可设置默认值
多图上传新版本 更好用
头像群组
数值动画
模态对话 ( 4 )
顶部消息框
模态对话框
底部对话框
底部消息框
表单相关 ( 7 )
表单元素
表单验证
数值框
数字键盘
可选标签 单选 多选
点选按钮
下拉选择
文章相关 ( 4 )
文本编辑器
编辑器解析
富文本加强
展开全文
JS 函数库 ( 6 )
工具介绍
时间转换
网络请求
随机数值
md5 转换
使用 promise
系统信息 ( 含 iphoneX 底部 )
常用界面 ( 19 )
搜索界面
登录注册
个人中心
购物车
订单中心
商品详情
图片懒加载
骨架加载
抽奖活动
瀑布流
地址列表
添加地址
证件上传
滚动推荐
短信验证
排行榜
数据图表
商城套装
即时通讯

GraceUI 组件动画

GraceUI 组件精细化更新工作进行中~ 如果您在使用时发现组件或样式不生效时,请先进行重新编译,重新编译后依然无效请升级您的 GraceUI 框架版本 ( 网站头部点击下载按钮获取最新版本 )即可! 此次更新预计持续到 2020-01-30 ~

graceUI.png

graceUI uni-app 普通版本和微信小程序独立开发版本动画库整理自 animate.css, 整合了丰富的 css 动画。
如果您使用的是 weex 模式请使用 weex 的 animation 模块来完成组件的动画。

使用语法 [ 非 weex 模式 ]

<view class="grace-animate 动画效果样式类"></view>

样式及动画效果 [ 非 weex 模式 ]

'bounce - 回弹', 'flash - 闪烁', 'pulse - 脉冲', 'rubberBand - 橡皮筋',
'shake - 晃动', 'headShake - 摇头', 'swing - 摇摆', 'tada - 缩放加摇摆', 
'wobble - 大幅度摇摆','jello - 果冻', 'heartBeat - 心跳', 'bounceIn - 跳动进入',
'bounceInDown - 向下飞入', 'bounceInLeft - 左侧飞入', 'bounceInRight - 右侧飞入', 
'bounceInUp - 向上飞入','bounceOutDown - 向下飞出','bounceOutLeft - 左侧飞出',
'bounceOutRight - 右侧飞出','bounceOutUp - 向上飞出',
'fadeIn - 渐变进入', 'fadeInDown - 渐变向下进入','fadeInDownBig - 渐变向下进入大幅度','fadeInLeft - 渐变左侧进入',
'fadeInLeftBig - 渐变左侧进入大幅度','fadeInRight - 渐变右侧进入','fadeInRightBig - 渐变右侧进入大幅度',
'fadeInUp - 渐变向上进入','fadeInUpBig - 渐变向上进入大幅度','fadeOut - 渐变消失','fadeOutDown - 向下淡出',
'fadeOutDownBig - 向下淡出大幅度','fadeOutLeft - 左侧淡出','fadeOutLeftBig - 左侧淡出大幅度','fadeOutRight - 右侧淡出',
'fadeOutRightBig - 右侧淡出大幅度','fadeOutUp - 向上淡出','fadeOutUpBig - 向上淡出大幅度',
'flip - 快速翻转','flipInX - 水平翻转','flipInY - 垂直翻转','flipOutX - 水平翻转后消失','flipOutY - 垂直翻转后消失',
'lightSpeedIn - 光速侠进入','lightSpeedOut - 光速侠消失',
'rotateIn - 旋转进入','rotateInDownLeft - 旋转左下为轴','rotateInDownRight - 旋转右下为轴','rotateInUpLeft - 旋转左上为轴',
'rotateInUpRight - 旋转右上为轴','rotateOut - 旋转淡出','rotateOutDownLeft - 旋转左下为轴淡出',
'rotateOutDownRight - 旋转右下为轴淡出','rotateOutUpLeft - 旋转左上为轴淡出','rotateOutUpRight - 旋转右上为轴淡出',
'hinge - 合页','jackInTheBox - 动态盒子','rollIn - 滚动进入','rollOut - 滚动淡出',
'zoomIn - 缩放进入','zoomInDown - 向下缩放进入','zoomInLeft - 从左缩放进入','zoomInRight - 从右缩放进入',
'zoomInUp - 向上缩放进入','zoomOut - 缩放消失','zoomOutDown - 向下缩放消失','zoomOutLeft - 从左缩放消失',
'zoomOutRight - 从右缩放消失','zoomOutUp - 向上缩放消失','slideInLeft - 左侧滑入',
'slideInRight - 右侧滑入','slideInUp - 顶部滑入','slideOutDown - 底部滑出','slideOutLeft - 左侧滑出',
'slideOutRight - 右侧滑出','slideOutUp - 顶部滑出'

调用动画 [ 非 weex 模式 ]

1. 自定义一个动画效果
语法 : .样式名称{animation:动画名称 动画时间 动画规则;}
如 : .animate1{animation:bounce 1s linear;}
2. 视图调用此样式
如 : <view class="demo animate1">示例</view>

演示代码

UNI 普通版本
NUVE 版本
微信小程序独立版本
请点击左侧按钮切换