Синтаксис перехода webkit в JavaScript?

Question

Я ищу ссылку на объект webkitTransition здесь

 function spawnAnimation(what){
    //sets the moving element
    var moveingEl = document.getElementById(what);
    //gives temp transition property
    moveingEl.style.WebkitTransition = "left 2s";
   // moveingEl.style.webkitTransition = "top 500ms";

   var cLeft = moveingEl.style.left
   var cleft = Number(cLeft.slice(0, -2));

    var cTop = moveingEl.style.top
   var cTop = Number(cTop.slice(0, -2));

   moveingEl.style.left = cLeft+200 + "px";

}

Это не работает. Я хотел бы дать элементу свойство перехода, а затем заставить его двигаться вправо. Когда этот код вызывается, он сразу же перемещается вправо без анимации. Облом :(. Я не хочу предварительно определять его в CSS, я хотел бы динамически добавить его, а затем удалить.

Answer 1

Использовать style.setProperty.

moveingEl.style.setProperty("-webkit-transition", "left 5s linear");

moveingEl.style.setProperty("left", "200px");

http://jsfiddle.net/7b4VZ/3/

Answer 2

Разрешить 1 мс для визуализации, чтобы вернуть поток.

setTimeout(function() {
    myElement.style.height = '200px'; /* or whatever css changes you want to do */
}, 1);​

Answer 3

Вы можете использовать:

element.style.webkitTransition = "set your transition up here"

Answer 4

<script>
        $(document).ready(function(){

                var x = 100;
                var y = 0;
            setInterval(function(){
                x += 1;
                y += 1;
                var element = document.getElementById('cube');
                element.style.webkitTransform = "translateZ(-100px) rotateY("+x+"deg) rotateX("+y+"deg)"; //for safari and chrome
                element.style.MozTransform = "translateZ(-100px) rotateY("+x+"deg) rotateX("+y+"deg)"; //for firefox
            },50);
            //for other browsers use:   "msTransform",    "OTransform",    "transform"

        });
    </script>

Answer 5

Я знаю, что это обходной путь, но вы можете использовать jQuery?

$(moveingEl).css('-webkit-transform', 'translateX(200px)');