退出系统
2.0 版本 weex 版本
快速开始
更新日志
快速部署框架
组件调用说明
代码块功能
data 重要说明
APP端关闭回弹
视频教程
组件库 ( 40个 )
01. 头部信息组件
02. Flex布局 + 通用样式
03. 常用文本
04. 滚动区域
05. 可移动区域
06. 徽章组件
07. 滚动公告
08. 通用列表
09. 图文列表
10. 新闻列表
11. 卡片视图
12. 多格图标
13. 局部选项卡
14. 全屏选项卡
15. 星级图标
16. 折叠面板
17. 按钮组件
18. Loading 组件
19. 全屏 Loading
20. 标题、更多、换一批
21. 横向公告
22. 底部导航
23. 表单组件
24. 数字输入框
25. 可选标签
26. 弹出层
27. 图标
28. 步骤
29. 倒计时(step)
30. 轮播组件
31. 滑动操作
32. 日历组件
33. 区间滑块
34. 顶部提示
35. 进度条、圆环进度条
36. 弹出式菜单
37. 多功能菜单
38. 数字键盘
39. 富文本加强
40. 浮层引导
界面库 ( 27个 )
01. 评论界面
02. 搜索界面
03. 登录、注册
04. 城市选择
05. echarts 【第三方】
06. 图片选择及预览
07. 设置界面
08. 下拉刷新
09. 上拉加载
10. 普通表格
11. 数据表格
12. 时间轴
13. 商品分类展示
14. 购物车
15. 条件筛选
16. 瀑布流
17. 图片剪裁
18. 商品详情 + 属性选择
19. 图片懒加载
20. 地区联动
21. IM 即时通讯
22. 骨架屏
23. 分段切换
24. 抽奖活动
25. 问卷界面
26. 地址管理界面
27. 身份证上传
表单、验证
1. 表单组件
2. 表单、数据验证
css 动画
animate.css 动画库
js 工具库
常用工具库介绍
日期时间转换
网络请求工具
随机数及字符
MD5 转换
app版本检查及更新

GraceUI - ccs 动画库

graceUi-img.png
GraceUI - ccs 动画库说明

graceUI css 动画库整理自 animate.css, 整合了丰富的 css 动画.
使用语法

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

样式及动画效果

'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 - 顶部滑出'

使用动画

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

演示代码

uni-app 代码
微信小程序代码
请点击左侧按钮切换对应的手册内容