移動端動畫小結

一丶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動畫的執行。