webkit de transition de la syntaxe du javascript?

Je suis à la recherche pour le webkitTransition référence d'objet ici

 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";

}

Cela ne fonctionne pas.Je tiens à donner à l'élément de transition de la propriété, puis le faire glisser vers la droite. Lorsque ce code est appelé immédiatement se déplace vers la droite avec pas d'animation. la poisse :(. Je ne veux pas prédéfinir il en CSS, je voudrais ajouter dynamiquement et puis l'enlever.

OriginalL'auteur Philll_t | 2011-09-14

  1. 5

    Utiliser le style.setProperty.

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

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

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

    J'ai essayé et ça ne fonctionne pas. Toutes les autres suggestions?
    Ce n'était pas moi, l'homme. Ne supposez pas qu'il a été voté par moi juste à cause de ce commentaire. Je vous remercie de votre aide et votées pour lutter contre cette négatif, et de montrer mon appréciation.

    OriginalL'auteur kbtzr

  2. 2

    Permettre 1ms pour le rendu pour obtenir le fil de retour.

    setTimeout(function() {
    myElement.style.height = '200px'; /* or whatever css changes you want to do */
}, 1);​
    Cela a fonctionné parfaitement pour moi lorsque j'essaie d'animer une transformation avec une transition. Merci.

    OriginalL'auteur thomas-peter

  3. 1

    Vous pouvez utiliser:

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

    OriginalL'auteur hallodom

  4. 0

    Je sais que c'est une solution de contournement, mais pouvez-vous utiliser jQuery?

    $(moveingEl).css('-webkit-transform', 'translateX(200px)');
    aussi peut-être que cela aidera? slides.html5rocks.com/#css-transitions
    -1 Béquilles sucer.

    OriginalL'auteur captainclam

  5. 0
    <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>

    OriginalL'auteur Dhruv Dholakia