通過使用-webkit-transform而不是-webkit-transition來利用硬件加速功能？

Question

我希望創建一個動畫，在每次點擊一個按鈕時，一個對象向右移動一定量。

例如，如果對象的初始位置是「left：10px」，並且每1個動畫循環都將其移動了10px，那麼在第一次點擊之後應該是20px，第二次點擊之後應該是30px並且等等。

這裏是我的代碼現在：

的JavaScript

document.getElementById('move-me').addEventListener('click', function() { 

    var move = document.getElementById('move'); 
    move.style.left = (move.offsetLeft + 10) + 'px'; 

}, false); 

HTML

<button id="move-me">Move</button> 
<div id="move"></div> 

CSS

#move { 
    background: green; 
    height: 50px; 
    left: 0px; 
    position: absolute; 
    top: 100px; 
    transition:    left 250ms ease-in-out; 
     -moz-transition: left 250ms ease-in-out; 
     -ms-transition:  left 250ms ease-in-out; 
     -o-transition:  left 250ms ease-in-out; 
     -webkit-transition: left 250ms ease-in-out; 
    width: 50px; 
} 

該代碼使用CSS3過渡，但它並沒有使用的 - 我們我的android設備上的bkit轉換硬件加速。我如何解決這個問題？

Answer 1

選擇不在-webkit-transform和-webkit-transition之間，它在left和-webkit-transform之間。

這裏是如何利用3D加速：

#move { 
    background: green; 
    height: 50px; 
    left: 0px; 
    position: absolute; 
    top: 100px; 
    -moz-transition: -moz-transform 250ms ease-in-out; 
    -ms-transition:  -ms-transform 250ms ease-in-out; 
    -o-transition:  -o-transform 250ms ease-in-out; 
    -webkit-transition: -webkit-transform 250ms ease-in-out; 
    transition:    transform 250ms ease-in-out; 
    width: 50px; 
} 

的Javascript：

document.getElementById('move').addEventListener('click', function() { 
    var move = document.getElementById('move'); 
    var transform = "translate3d("+ (move.offsetLeft+200) + "px, 0, 0)"; 
    move.style.webkitTransform = transform; 
    move.style.mozTransform = transform; 
    move.style.msTransform = transform; 
    move.style.oTransform = transform; 
    move.style.transform = transform; 

}, false); 

http://jsfiddle.net/CjQ8H/

Answer 2

您還可以使用平移X。這個明確的硬件加速。

targetDiv.style.webkitTransition = "0ms" 

targetDiv.style.webkitTransform = "translateX(100%) 

這將通過100％的div向右移動，但舒適順暢只有在硬件加速設備。