資訊專欄INFORMATION COLUMN
摘要：一丶方法可以細化操作，回調方法，但是在移動端安卓卡頓二丶可以用細化過渡效果，沒有回調操作，只能監(jiān)控是否已完成。會存在過度繪制，會造成幀丟失，繼而導致動畫斷續(xù)顯示。
一丶jq/zepto animate()方法
可以細化操作，回調方法，但是在移動端（安卓）卡頓
二丶css3 animation可以用@keyframes細化過渡效果，沒有回調操作，只能監(jiān)控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會存在過度繪制，會造成幀丟失，繼而導致動畫斷續(xù)顯示。這也是setTimeout的定時器值推薦最小使用16.7ms的原因（16.7 = 1000 / 60, 即每秒60幀）。而requestAnimationFrame是跟著瀏覽器繪制來的，不會存在過度繪制，也就不會出現動畫卡頓的情況。
參考鏈接代碼
元素display:none的時候是拿不到transform的值（其他屬性沒試），解決辦法：用visibility: hidden;
過渡動畫的時候，先讓元素display:block 馬上執(zhí)行css3動畫，結果瀏覽器直接忽略過渡動畫，渲染最后的結果。
解決辦法：使用延時器(1ms)，延遲一點css3動畫的執(zhí)行。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://m.hztianpu.com/yun/94432.html
摘要：如何讓我們所開發(fā)的手機頁面能有更好的交互體驗，就是這篇文章的主旨移動開發(fā)問題和優(yōu)化小結。關于和鼠標事件的延遲說明，我引用葉小釵大神博客里面的一張圖片，如下在手機上，的延遲將近。 1.前言 到目前為止，互聯(lián)網行業(yè)里，手機越來越智能化，移動端占有的比例越來越高，尤其實在電商，新聞，廣告，游戲領域。用戶要求越來越高，網站功能越來越好，效果越來越炫酷，這就要求我們產品質量越來越高，web前端開...
摘要：如何讓我們所開發(fā)的手機頁面能有更好的交互體驗，就是這篇文章的主旨移動開發(fā)問題和優(yōu)化小結。關于和鼠標事件的延遲說明，我引用葉小釵大神博客里面的一張圖片，如下在手機上，的延遲將近。 1.前言 到目前為止，互聯(lián)網行業(yè)里，手機越來越智能化，移動端占有的比例越來越高，尤其實在電商，新聞，廣告，游戲領域。用戶要求越來越高，網站功能越來越好，效果越來越炫酷，這就要求我們產品質量越來越高，web前端開...
摘要：在做移動開發(fā)時有很多地方跟端是不一樣的，需要不一樣的設置，這里就記錄下移動開發(fā)中有用的設置和一些通用代碼。其他關于打電話發(fā)短信發(fā)郵件的實現打電話給發(fā)短信給發(fā)郵件給關于布局移動端中對于的支持已經很好，是布局神器。 在做移動 Web 開發(fā)時有很多地方跟 PC 端是不一樣的，需要不一樣的設置，這里就記錄下移動 Web 開發(fā)中有用的設置和一些通用代碼。 我的博客地址 HTML 設置頁面寬度等于...
閱讀 1218·2021-11-25 09:43
閱讀 1736·2021-09-13 10:25
閱讀 2696·2021-09-09 11:38
閱讀 3578·2021-09-07 10:14
閱讀 1805·2019-08-30 15:52
閱讀 705·2019-08-30 15:44
閱讀 3663·2019-08-29 13:23
閱讀 2043·2019-08-26 13:33
