在Android瀏覽器上的CSS3動畫問題

我正在製作一個HTML5應用程序，並且我已經使用CSS3轉換（css3旋轉）從一端使用jQuery ui拖動來旋轉箭頭。我已經集成了jQuery UI Touch Punch庫（v0.2.2）來模擬Ipad和平板電腦等觸摸設備上的拖動事件。在Android瀏覽器上的CSS3動畫問題

除了Android平板電腦（4.1）以外，所有平臺上的箭頭都能平穩地旋轉。看起來我正在得到一種滯後效果，它以幀的形式旋轉（箭頭在設備上旋轉我的手指3-4秒後旋轉），或者它無法及時檢測到我的觸摸。我已經在很多平板電腦上測試過，所以我非常肯定它不是硬件問題。在互聯網上查找後，我發現在android上關於轉換的css3動畫有問題。但我不認爲這是原因。

這是我的代碼。儘管我確信性能問題與代碼無關，但如果您仍然覺得這一點，請隨時評論並提高其性能。如果有其他可用的庫可以實現與jquery touch punch相同的功能，我也願意測試它們。請建議。

$('#arrow').draggable({ 
    handle: '#arrow', 
    opacity: 0.01, 
    helper: 'clone', 
    refreshPositions: true, 
    cursorAt : {left: 0 , top: 0}, 
    drag: function(event, ui){ 
     var curr_x = ui.offset.left; 
     var curr_y = ui.offset.top; 
     var radians = Math.atan2(curr_x - 40, curr_y - 500); 
     var degree = (radians * (180/Math.PI) * -1) + 90; 
     var rotateCSS = 'rotate(' + degree + 'deg)'; 
     $(this).css({ 
       'transform': rotateCSS, 
       '-moz-transform': rotateCSS, 
       '-webkit-transform': rotateCSS, 
       '-ms-transform': rotateCSS, 
       '-o-transform': rotateCSS, 
     }); 
    } 
});

來源

2012-12-27 Mohit Srivastava

即使世界沒有你的代碼錯誤，不幸的是Android瀏覽器的變化相當顯着的版本之間因此它可能這個滯後只會影響一小部分用戶魔藥的一小段時間。

我能想到的最優化你的流程的唯一方法是刪除jQuery UI的拖動（jQuery UI的是衆所周知的是非常令人費解，效率低下），而是使用或者核心JS或簡單的jQuery連同寫功能小腳印觸摸庫如http://eightmedia.github.io/hammer.js/

雖然我不能檢查沒有一個例子在我看來你的問題只是缺乏最新的支持cssTransitions在android 4.1或缺乏處理能力說在筆記本電腦上。

要記住的另一件事是jQuery的可拖動將使用.animate（）來移動的東西，而不是.css（），所以在很多情況下，過渡將變得無用，因爲jquery會導致性能不足。

您現在可能已經解決了這個問題，但希望信息有幫助。

來源

2013-04-09 20:10:58 Jai

嘿，謝謝你的信息。我實際上正在尋找替代圖書館來觸摸衝牀，我想我找到了一個:) –

在Android瀏覽器上的CSS3動畫問題

回答

相關問題