一丶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/majun0007/article/details/70049070

四丶RequestAnimationFrame

如果你需要细化过渡效果，但是使用setTimeout可能在性能不够的手机上还是会出现卡顿的情况，我就遇到了这样的情况。 setTimeout会存在过度绘制，会造成帧丢失，继而导致动画断续显示。这也是setTimeout的定时器值推荐最小使用16.7ms的原因（16.7 = 1000 / 60, 即每秒60帧）。而requestAnimationFrame是跟着浏览器绘制来的，不会存在过度绘制，也就不会出现动画卡顿的情况。
参考链接代码

五丶遇到的坑

• 元素display:none的时候是拿不到transform的值（其他属性没试），解决办法：用visibility: hidden;

• 过渡动画的时候，先让元素display:block 马上执行css3动画，结果浏览器直接忽略过渡动画，渲染最后的结果。

  解决办法：使用延时器，延迟一点css3动画的执行。

赏

请我喝杯卡布奇诺？

微信