WebKit CSS преобразования и анимации в Javascript

Question

Я работаю над веб-приложением для iPhone.Я только начал играть с CSS-правилами webkit-transform и webkit-animation.У меня есть несколько вопросов: например, есть ли реальное преимущество в их использовании, скажем, вместо jQuery.animate (...)?Получающиеся анимации, кажется, не настолько ускорены и быстры.Давайте объясним лучше: у меня есть серия изображений, которые я должен переместить на экран, например, галерея ... Я устанавливаю правила CSS для каждого изображения следующим образом:

-webkit-transition-property: left, top, right, bottom, width;
-webkit-transition-duration: 200ms;

, затем я меняю style.leftи style.top каждого элемента, который я хочу переместить с новыми координатами.Результат не такой быстрый, как я ожидал.Он более или менее быстр, как и JQuery (совсем не плавно).Я видел, что есть даже -webkit-animation и -webkit-transform, но я все еще не понимаю, как правильно их использовать.Первый позволяет мне перемещать вещи, но не генерирует анимацию, я использую следующий код:

var trans = "translate(" + x + "px," + y + "px)";
ELEMENT.style.webkitTransform = trans;

, при этом элемент перемещается, но без анимации.Если я динамически создаю анимацию с помощью:

var lastSheet = document.styleSheets[document.styleSheets.length - 1];
lastSheet.insertRule("@-webkit-keyframes "+ "animX" + "{ from { top: "+oy+"px; left:"+ox+"px;} to {top: " + y + "px; left: " + x + "px; } }",lastSheet.cssRules.length);
ELEMENT.style.webkitAnimationName = "animX";

, тогда элемент будет перемещаться один раз, не так быстро, и хорошо вернется к своей старой позиции.Повторение этого кода ни к чему не приведет.

Как вы думаете, есть ли реальное преимущество с точки зрения плавности движений при их использовании?И если да, то как их правильно использовать?

Answer 1

Что-то вроде этого должно делать то, что вы хотите, и довольно гладко работает в Safari на моем iPhone 4:

<style type='text/css'>

    #element {

        position: absolute;
        top: 0px;
        left: 0px;
        -webkit-transition-property: top, left, bottom, right;
        -webkit-transition-duration: 300ms;
        -webkit-transition-timing-function: ease-in;

    }

</style>

<script type='text/javascript'>

    document.querySelector('#element').style.left = '300px';

</script>