动画学习之Animate.css的使用与解析
来源:互联网 发布:淘宝账号异常申诉 编辑:程序博客网 时间:2024/05/29 14:13
转自:http://blog.csdn.net/code_for_free/article/details/52075129
animate.css的主页简单明了,能演示各个动画的效果,目的也很简单,“just-add-water css animations”。那天好奇去搜索了一下作者Daniel Eden,真是酷到不行。
不多说,直接上学习资料:
官方github
估计读完github里面的README.md之后就不用往下看了吧,对于animate.css的用法早已了然于心,如果你还有兴趣,想看看我这个无聊的博主能写些什么东西,希望不会让你失望。
一,静态使用动画(很绕吧…)
引用animate.css
给需要动画的元素添加class
- 1
- 2
刷新页面就能看到动画这两个字在上下蹦。done,静态使用就这么简单
总结一下场景和优缺点吧,优点是简单呀,添加个类名就一劳永逸了,一行js代码都不用写,缺点是不能人为控制开始和停止。我能想到的场景:
①loading动画
②新开页面某些元素动一次,能吸引用户注意(如注册按钮等)
二,动态使用
掌握了上述用法之后,动态使用也不过小菜一碟。基本思路如下:
给动画对象添加类,然后监听动画结束事件,一旦监听到动画结束,立即移除前面添加的类。
这样一来,想什么时候开始和结束动画都随你了。对于这种用法(也是实际开发中最多的用法),官方给出了jQuery的封装:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
因为手上有个小项目没用jQuery这么高大上的库,于是自己写了个js原生的实现,也扩展了一些功能:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
上面的代码也就是个半成品:
- 只监听了”animationend”事件,兼容性不好(可多次调用addEventListener监听其他事件);
- 先延时,再执行(将回调函数封装一下,先调用回调函数一次,再进入间隔循环)
源码解析
源码只有一份animate.css,相对简单,下面主要说说三个关键类。
一,animated
设置了动画时长和动画执行前后元素应该怎样应用样式(animation-fill-mode)
- 1
- 2
- 3
- 4
- 5
- 6
二,infinite
设置了动画次数(无限次)
- 1
- 2
- 3
- 4
三,动画类名(如:bounce)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
总的来说实现的原理比较简单,业务组织也很明确,就是三个类,比较有意思的是去研究各个动画的keyframes是怎样的,很有意思(细节远比我想象的要多),例如上面那个bounce动画,从关键帧就能看出很多细节,随意蹦两下那么粗糙。
自定义选项
这个放在最后是因为看了源码之后很自然就无师自通懂得怎么自定义了,例如想用css来控制动画次数等。
- 1
- 2
- 3
- 4
- 5
else
内联元素(如a标签)不支持bounce动画。
- 动画学习之Animate.css的使用与解析
- 动画学习之Animate.css的使用与解析
- Animate.css_动画学习之Animate.css的使用与解析
- 动画学习之Animate.css
- Ionic3学习笔记(五)动画之使用 animate.css
- Animate.css动画库的使用
- vue 和animate.css 的动画使用
- css3动画简介以及动画库animate.css的使用
- css3动画简介以及动画库animate.css的使用
- css3动画简介以及动画库animate.css的使用
- css3动画简介以及动画库animate.css的使用
- css3动画简介以及动画库animate.css的使用
- css3动画简介以及动画库animate.css的使用
- css3动画简介以及动画库animate.css的使用
- css3动画简介以及动画库animate.css的使用
- vue之vue与animate.css动画结合
- animate.css的使用
- animate.css的使用
- 在Visual C++下搭建OpenGL的开发环境
- Linux安装mongodb及启动
- POJ 2342. Anniversary party 简单树形DP c++ 代码
- win7 远程配置ubuntu14 python keras tensorflow 深度学习
- 进群就做题??
- 动画学习之Animate.css的使用与解析
- 使用ExtJs实现文件下载
- Loader
- Android 开发中的一些建议
- 算法导论 练习题 13.2-4
- 集群与负载均衡系列(5)——消息队列之spring-boot整合Rabbitmq
- 摄像机标定参数
- java排序:直接插入排序和希尔排序
- WEB应用增加trace_id记录