1.jq/zeptoanimate()方法可以细化操作和回调方法,但是在移动端(安卓)卡顿2.CSS3动画可以使用@keyframes细化过渡效果,不回调手术。只能监控动画/过渡是否完成。3.transformtop/left导致重绘,手机性能不好的时候还是卡顿。使用绝对位置定位页面上的动画元素,并将其与文档流分开,可以有效防止重排。使用transform:translateY/X移动元素scale()缩放元素加上-webkit-transform:translate3d(0,0,0);转换:translate3d(0,0,0);开启GPU硬件加速【参考链接】http://blog.csdn.net/majun000...4.RequestAnimationFrame如果需要细化转场效果,但是在性能不够的手机上使用setTimeout还是可能会卡顿,我遇到过这样的情况。setTimeout会有overdrawing,会造成丢帧,进而导致动画显示断断续续。这也是为什么建议setTimeout的定时器值最小使用16.7ms(16.7=1000/60,即每秒60帧)的原因。requestAnimationFrame是用浏览器绘制的,不会出现过度绘制,也不会出现动画卡顿。参考链接代码5,遇到坑元素display:none时,获取不到transform的值(其他属性我没试过)。解决办法:使用visibility:hidden;过渡动画时,首先让元素显示:块立即执行css3动画,结果浏览器忽略过渡动画并呈现最终结果。解决方案:使用一个延迟器(1ms)来稍微延迟CSS3动画的执行。
