以前就听说过有个库，叫animate.css，但是自己并没有在实际项目中使用过，这次正好要做个招聘页面，得以利用一下这个库，在经常会卡顿的UC浏览器中也能流畅执行。
扫描下面的二维码，可以看到在线的demo页面：
如果对CSS3动画的一些基础概念不是很熟悉，可以参考《CSS3中的动画效果记录》。
一、animate.css库中的相关知识点
从github上面下载下来是一个css文件，文件里面有3000多行代码，大部分的代码还是能看懂的。
但里面的代码还是有很多耐人寻味的地方。
1. 关键帧的选定，不仅有整数，还有小数，并且也不是说有规律的，几的倍数。
2. 速度曲线的选定，使用的是cubic-bezier函数，自定义贝塞尔曲线，这里有个在线制作贝塞尔曲线的工具。
3. 全程使用transform属性来实现动画效果，使用了大量的translate3d、rotate3d、scale3d，这样还能开启硬件加速。
4. 使用perspective属性设置镜头到元素平面的距离。
1）内置的动画有多种
1. bounce（跳动）、flash（闪光）、pulse（脉冲）、rubber band（橡皮筋）、shake（抖动）、swing（摇摆）、wobble（摇摆不定）
2. fade（淡入或淡出）
3. flip（翻转）
4. rotate（旋转）
5. slide（滑动）
6. zoom（放大或缩小）
2）translate3d、rotate3d、scale3d
上图就是一个3D坐标，人眼的正对面是z轴的正方向。可以在线调试这三个属性的效果。
1. translate3d语法如下：
据说tz轴位移向量的长度不能设置为百分比值，如果取值为百分比值，将会认为无效值。
2. rotate3d语法如下：
x，y，z是一个0到１之间的数值，主要用来描述元素围绕X轴或Y轴或Z轴旋转的矢量值
a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。
下图中two到three是绕着X轴旋转，six到one是绕Y轴旋转。而绕Z轴就和2D的旋转效果类似。
3. scale3d语法如下：
二、页面开发过程
1）设计稿
踩到的第一个坑，我页面采用了flexible.js可伸缩布局，这样宽度就和设计稿一样了。设计稿的宽度是750px，也就是iPhone6的CSS像素。
我伸缩下也变成了750px，这样在设置边距的时候就可以直接用设计稿上面的了。关于屏幕适配可以参考《移动开发屏幕适配分析》
宽度是搞好了，但是高度却不一样，手机上面是1198px，设计稿是1206px，chrome上的模拟器是1256px。
额，怪不得我按照设计稿的边距设置，在模拟器或手机上都达不到效果图的样子。
2）实现原理
在翻页的时候，将当前页面隐藏掉，给新页面加个样式，触发动画。
下图中的“li”就是在翻页后加一个样式“play”，触发整个动画开始执行。
“li”中的子元素就是img图片，发生动画的就是这些img标签：
CSS代码如下：
.img3 {
width: 4.666667rem;
height: 2.133333rem;
left: 2.8rem;
top: 4rem;
z-index:;
}
.play .img3 {
-webkit-animation: zoomInUp 1s 1.2s backwards;
animation: zoomInUp 1s 1.2s backwards;
}
下图中，这个箭头其实是两个动画的结合体，不过在IOS可以实现两个动画，而在Android中只能实现一种。
先放大然后再用脉冲效果。
.arrow {
animation: zoomIn 1s 5s backwards, pulse 1s 0s infinite;
}
3）animation-fill-mode的使用
一开始不太明白，这动画怎么才能触发，而且一开始各个元素是隐藏掉的，这咋做到的，后面参考了些页面，发现了下面这个属性。
animation-fill-mode：规定对象动画时间之外的状态。
将其设置为“backwards”：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
在第一帧中设置为透明，然后就能达到一个一个出现的效果了。
左图所示，这个时候就可以在第一帧中设置透明，注意不能用display:none，来隐藏，display不会出现动画。
如果不设置为“backwards”，那就会像右图所示，先显示然后隐藏，再开始动画。
4）rem与CSS自动前缀
我现在是用SASS来写CSS，上面代码中的rem都是在编译的时候动态计算出来的。
-webkit的那个前缀也是在编译的时候动态添加的。
现在开发会使用前端自动化构建工具gulp。具体配置可以参考《前端自动化构建工具gulp记录》
三、JavaScript部分
1）slider绑定
给“ul”绑定touchstart、touchmove、touchend。touch的相关概念可以参考《触屏touch事件记录》
在touchmove中计算偏移量，超过指定的偏移才在touchend触发滑动效果。
页面中动画很多，有的地方需要在动画结束后触发一些效果，所以要绑定“webkitTransitionEnd”事件。
$slider.on("webkitTransitionEnd", 'li', function() {
isSlide = false; //slide动画结束 防止暴力切换
});
$slider.on('touchstart', function(e) {
var touch = e.touches[0];
startX = touch.clientX;
startY = touch.clientY;
if (isSlide) {
e.preventDefault();
}
}).on('touchmove', function(e) {
var touch = e.touches[0],
posY = touch.clientY,
posX = touch.clientX;
offsetY = posY - startY;
offsetX = posX - startX;
isMove = true;
e.preventDefault();
}).on("touchend", function(e) {
if (!offsetY || Math.abs(offsetY) < 30 || !isMove) {
return;
}
$this = $(e.target);
if ($this[0].tagName != 'LI') {
$this = $this.closest('li');
}
var current = $this.index();
$this.siblings('li').removeClass('play'); //防止出现重叠BUG
if (offsetY > 0) { //向下滑动
direction = "down";
$next = $this.prev();
} else { //向上滑动
direction = "up";
$next = $this.next();
}
if (current == 0 && direction == 'down') {
return;
}
if (current == length - 1 && direction == 'up') {
return;
}
if (direction == 'up') {
$this.addClass('move-up');
} else {
$this.addClass('move-down');
}
isSlide = true;
offsetY = 0;
offsetX = 0;
setTimeout(function() {
$this.removeClass('play move-up move-down');
$next.addClass('play').siblings('li').removeClass('play');
}, 300);
});
2）e.preventDefault
在“touchstart”和“touchmove”都调用了这个方法，这句话的意思是阻止默认行为。
第一个调用是为了防止在手指快速的上下滑动的时候触发“touchend”中的切换。
第二个是Android 4.0+的一个BUG，就是有时候不会触发“touchmove”事件，加了这个后就能触发。
不过加了这个后，相应位置的滚动就无效了，囧。
关于事件处理的相关概念可以参考《JavaScript中事件处理》
参考资料：