一丶jq/zepto animate()方法
- 可以细化操作，回调方法，但是在移动端（安卓）卡顿
二丶css3 animation
- 可以用@keyframes细化过渡效果，没有回调操作，只能监控animation/transition是否已完成。
三丶transform 过渡top/left 导致重绘，手机性能不好时依然卡顿
- 使用绝对位置定位页面上的动画元素，将其脱离文档流，可以有效的防止重排。
- 使用transform:translateY/X来移动元素 scale()缩放元素
- 加上 -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); 开启GPU硬件加速
- [参考链接]http://blog.csdn.net/majun000...
四丶RequestAnimationFrame
如果你需要细化过渡效果，但是使用setTimeout可能在性能不够的手机上还是会出现卡顿的情况，我就遇到了这样的情况。 setTimeout会存在过度绘制，会造成帧丢失，继而导致动画断续显示。这也是setTimeout的定时器值推荐最小使用16.7ms的原因（16.7 = 1000 / 60, 即每秒60帧）。而requestAnimationFrame是跟着浏览器绘制来的，不会存在过度绘制，也就不会出现动画卡顿的情况。
参考链接代码
五丶遇到的坑
- 元素display:none的时候是拿不到transform的值（其他属性没试），解决办法：用visibility: hidden;
- 过渡动画的时候，先让元素display:block 马上执行css3动画，结果浏览器直接忽略过渡动画，渲染最后的结果。
解决办法：使用延时器(1ms)，延迟一点css3动画的执行。