Animate.css的使用
很久之前学animate留的笔记..
2016年9月10号: E-cat
昨晚学了animate.css觉得很有意思，这样可以通过简单调用class类名就能实现丰富有趣的动态样式。
今天接着学了swipe这个专为移动端设计的插件，为了巩固知识点，做一下有关animate.css的笔记。
首先从下载和安装开始说起：
①下载animate.css
下载地址：https://www.haorooms.com/uploads/example/Animatecss/Animate/animate.css
②安装animate.css /*这里注意，开发版大小一般为72kb，压缩版为60kb*/
直接在页面顶部head标签通过link引入<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
基本模板如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <link rel="stylesheet" href="css/animate.css" /> 7 </head> 8 <body> 9 <div id="test" class="animated bounce infinite">test</div> 10 <!-- 这边注意div里类名不分先后但是必须有animated 和 动作类名infinite即为无限循环，默认为播放一次 --> 11 </body> 12 </html>
下载、安装结束，现在就可以开始享受learn more,write less的乐趣啦！！
接下来，就是对animate.css运动的一个小总结，虽然不多，但是归类后方便后面查找！
/*按官网顺序*/
①Attention seekers
- bounce 轻轻跳跃一下（弹跳；弹起，反跳；弹回）
- flash 闪烁两次（使闪光；反射）
- pulse 慢慢放大，然后回缩（跳动，脉跳）
- shake 左右轻晃几次
- swing 以中间顶部为中心小幅度晃动
- tada 很调皮的一个小晃动，ps：只能这么描述了
- wobble 大幅晃动，地动山摇
②Bouncing Entrances
- bounceIn 正中央，从无到有，轻轻抖动几次
- bounceInDown 从右侧进来，无到有，轻轻抖动几次
- bounceInLeft 雷同，但是一定要注意大小写“专业点叫驼峰式”
- bounceInRighr
- bounceInUp
- bouncing Exits
- bounceOut 正中央，从有到无，轻轻抖动几次消失
- bounceOutDown
- bounceOutLeft
- bounceOutRighr
- bounceOutUp
③Fading Entrances
- fadeIn 跟上面bounceIn还是有些区别的，毕竟不抖
- fadeInDown 逐渐从上面down下来
- fadeInDownBig逐渐从上面down下来，但是跟上面那位有稍微区别，加了big后起始位置是从设备外进来的
- fadeInLeft
- fadeInLeftBig
- fadeInRight
- fadeInRightNig
- fadeInUp
- fadeInUpBig 用up测试下big吧
- fading Exits
- fadeOut 恰与fadeIn相反
- fadeOutDown 逐渐从上面down下去消失，你确定不玩玩big了？
- fadeOutDownBig逐渐从上面down下去，但是跟上面那位有稍微区别，加了big后终点位置是从设备外
- fadeOutLeft
- fadeOutLeftBig
- fadeOutRight
- fadeOutRightNig
- fadeOutUp
- fadeOutUpBig
/*以下这些都是常用的哦！*/
④Flippers
- flip 一个夸张的放大饭庄缩小效果
- flipInX 沿中心水平轴小幅度反转出来
- FlipInY 沿中心竖直轴小幅度反转出来
- flipOutX 沿中心水平轴小幅度反转消失
- FlipOutY 沿中心竖直轴小幅度反转消失
⑤Lightspeed
- lightSpeedIn 字面意思就是光速出来喽，记得调快速度哦，什么，怎么调速我没说么？好吧，先留个坑，待会儿补。
- lightSpeedOut 光速消失
⑥Rotating Entrances
- rotateIn 准确说是以正中心点180度旋转渐显
- rotateInDownLeft 没错，就是以左上角为中心点转下来
- rotateInDownRight 就是以右上角为中心点转下来
- rotateInUpLeft 就是以左上角为中心点转上去
- rotateInUpRight 就是以右上角为中心点转上去
- rotating Exits
- rotateOut 准确说是以正中心点180度旋转渐隐
- rotateOut DownLeft
- rotateOut DownRight
- rotateOut UpLeft
- rotateOut UpRight
⑦Sliding Entrances
- slideInUp 这个slide感觉就有点鸡肋了，有了上边的Lightspeed、fadeIn，就会看出这个的弊端，动作幅度太小
- slideInDown
- slideInLeft
- slideInRight
- sliding Exits
- slideOutUp 表现依旧不好
- slideOutDown
- slideOutLeft
- slideOutRight
⑧Zoom Entrances
- zoomIn 牢记哦，正中央出来的，做效果是最棒了
- zoomInDown
- zoomInLeft
- zoomInRight
- zoomInUp
- zoom Exits
- zoomOut 牢记哦，正中央消失的，配合上面的zoomIn做效果是最棒了
- zoomOutDown
- zoomOutLeft
- zoomOutRight
- zoomOutUp
⑨Specials
- hinge 悬挂，颤抖，掉下去
- rollIn 从左侧旋转进入
- rollOut 向右侧旋转消失
到此呢，整个animate.css里的所有动作效果规整完毕。回上边去填坑！！
算了，还是在这里填吧，若想用到延时加载和控制运动过渡时间，就必须要用到jquery了，所以我们先去找个jq引入到页面底部
Demo如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 7 <link rel="stylesheet" href="css/animate.css" /> 8 <style type="text/css"> 9 .test{ 10 position: absolute; 11 width: 100px; 12 font-size: 50px; 13 top: 50px; 14 left: 50%; 15 margin-left: -50px; 16 } 17 </style> 18 </head> 19 <body> 20 <div class="animated rollIn test">test</div> 21 <script src="js/jquery-1.12.0.min.js" type="text/javascript" charset="utf-8"></script> 22 <script type="text/javascript"> 23 $(document).ready(function(){ 24 $('.test').css({'animation-duration':'.3s','animation-delay':'3s'}) 25 }) 26 </script> 27 </body> 28 </html>
没错，就是使用jq来重定义css样式，这种方法其实违背了animate简化运动代码的初衷！
