账户中心 退出系统
5.0 版本 3.0 版本
使用手册 模板中心 账户中心 合作 · 服务
快速开始
动画库介绍
下载及部署
基础组件
animate.css 动画组件
animate.css 连贯动画
gal-api-animate 组件
文本动画
文本淡入淡出
文本背景动画
数值展示动画
按钮动画
提交按钮动画
边框动画按钮
点赞按钮动画
常用动画
全屏加载动画
渐变背景动画
时钟动画
红包雨动画
gal-css-animate 组件

gal-css-animate 组件介绍

gal-css-animate 组件基于 animate.css ,实现了多种常用的动画效果( 请 下载 GAL 运行或者 访问微信小程序 " GraceUI 动画库" 查看效果)。

组件名称

gal-css-animate

组件属性

属性名称类型默认值作用
autoPlaybooleantrue是否自动播放动画
timingFunctionStringease-in速度曲线,取值参考 : https://www.w3school.com.cn/cssref/pr_animation-timing-function.asp
durationString1s动画执行时间, 如 100ms,2s
animateNameStringflash动画类型,详见下面的类型表
fillModeStringnone作用及取值参考 : https://www.w3school.com.cn/cssref/pr_animation-fill-mode.asp
delayString0ms
动画延迟时间
iterationCountString, Number1动画循环次数,取值参考 : https://www.w3school.com.cn/cssref/pr_animation-iteration-count.asp

组件事件

onMounted : 组件挂在完毕后触发的事件。

组件方法

01. play() : 播放动画方法;
02. loop(timer) : 利用 js 延迟实现循环播放动画方法,参数 : 间隔时间,单位 : 毫秒; 
03. stop() : 终止 loop() 方法产生的循环;

使用方法

在需要使用动画的元素外层包裹 gal-css-animate 组件即可(需要实现动画的组件是 gal-css-animate 组件的插槽);

演示代码

https://gitee.com/hcoder2016/grace-animation-library/blob/master/pages/demo/css-animate.vue

动画效果列表

动画样式名称效果
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顶部滑出