Использовать преимущества аппаратного ускорения, используя -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, но не использует аппаратное ускорение -webkit-transformна моем устройстве Android.Как мне это исправить?

Answer 1

Вы также можете использовать translateX.Это определенно аппаратное ускорение.

targetDiv.style.webkitTransition = "0ms"

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

Это переместит деление вправо на 100%, но приятно и плавно только в устройствах с аппаратным ускорением.

Answer 2

Выбор не между -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/