前端-框架实战（一）之Animate
hi，大家好，今天我们来说说关于框架的那些事吧
文章图片
随着HTML5规范的不断完善，围绕着这一生态有很多实用的框架，极大的提高了我们的开发效率，常见的框架代表有：UI层面的有Bootstrap、Yui、JqueryUI、CSS3Lib等，JS层面的有JQuery、Zeptojs、Angularjs、React、Vuejs等，还有很多常用的动画库、字体图标，比如：Animate、Wow、Iconfont、Iconmoon等。
这些前端框架典型的特点：简单易用、相通性强，我们可以在学习一个框架后快速上手其他框架。
主要知识点：Animate、WOW.js、 scrollReveal.js、Zepto.js、Bootstrap、 jQuery 等
醉牛前端 , 收集前端常用的工具集合
2.Animate
1.简介
文章图片
animate.css Animate.css是一个css动画样式库，其目标是让CSS动画像喝水一样容易（Just-add-water CSS Animation）。
animate.css is a bunch of cool, fun, add cross-brower animations foy you to use in your projects. Greate for emphasis, home pages, sliders, and general jus-add-water-awesomeness.(animate.css是有一堆狂拽酷炫吊炸天、跨浏览器的动画特效的综合动画库)
animate.css是一个来自国外的CSS3动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn\/rotateOut）、淡入淡出（fadeIn\/fadeOut）等多达70多种动画特效，几乎包含了所有常见的动画特效。
重点：浏览器兼容，animate.css底层是通过css3实现的，当然是只兼容支持CSS3 animate属性的浏览器：IE10+、Firefox、Chrome、Opera、Safari。
官方演示
2.最简单的使用
1.下载Animate的框架
官网：https://daneden.github.io/animate.css/
github:https://github.com/daneden/animate.css
2.集成到项目 
文章图片
3.将动画添加到标签中 
文章图片
4.循环播放动画 
文章图片
5.定制动画
文章图片
3.案例实战
1.导入登录项目
文章图片
2.引入Animate动画库
文章图片
3.引入jQuery
文章图片
4.实现点击登录的动画
文章图片
5.刷新页面
文章图片
6.动画的合成
文章图片
在合成动画之前删除之前的动画
【前端-框架实战（一）之Animate】
文章图片
推荐阅读
- NutUI|NutUI Bingo - 基于 Vue 3.0 的移动端抽奖组件，由京东前端团队打造
- i.MX6ULL终结者|i.MX6ULL终结者Linux 电容触摸屏实验Linux下电容触摸屏驱动框架
- 前端|Vue前端框架
- 微软|9个值得推荐的 VUE3 UI 框架
- 前端开发|值得推荐的Vue 移动端UI框架
- 前端面试必会网络跨域问题解决方法
- 前端AI机器学习在浏览器中训练模型
- android|android studio 布局嵌套,Android Studio实战 - 设计布局之嵌套布局
- web渗透|SQL注入&PostgreSQL&SQLserver&实战
- guns框架实现增删改查体会