Activer l'animation Webkit CSS3 en utilisant Javascript

Question

Je cherche à utiliser Webkit CSS3 pour déplacer un DIV positionné d'un endroit à un autre sur l'écran quand on appuie sur un bouton, en modifiant ses propriétés CSS gauche et droite. Cependant, tous les exemples de ce que j'ai vu utilisent une règle CSS statique pour appliquer cette transition.

Je ne connais pas la nouvelle position avant main, alors comment est-ce que j'applique dynamiquement cette transition CSS3?

Answer 1

Une fois que vous avez défini la transition, elle s'appliquera, peu importe comment vous modifiez les valeurs CSS de l'élément. Vous pouvez donc simplement appliquer un style en ligne avec JavaScript et l'élément va s'animer. Donc, avec CSS comme ceci:

left: 100px; 
top: 100px; 
-webkit-transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms; 
-moz-transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms; 
-o-transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms; 
transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms; 

ont une fonction comme ceci:

function clickme() { 
    var el = document.getElementById('mydiv'); 
    var left = 300; 
    var top = 200; 
    el.setAttribute("style","left: " + left + "px; top: " + top + "px;"); 
} 

Et vous verrez l'animation lorsque vous appelez la fonction. Vous pouvez obtenir les valeurs pour gauche et en haut d'où vous voulez. I've done a full example.

Answer 2

Une autre option serait d'utiliser jQuery Transit pour déplacer la position absolue div gauche ou à droite:

Javascript:

$("#btnMoveRight").click(function() { 
    $('#element').transition({ left: '+=50px' }); 
}); 

$("#btnMoveLeft").click(function() { 
    $('#element').transition({ left: '-=50px' }); 
}); 

JS Fiddle Demo

Il fonctionne bien sur les appareils mobiles et poignées de votre Compatibilité CSS3/navigateur pour vous.