css3 animation se passe seulement une fois

Question

Je suis en train de faire une rotation de la boîte par le biais de javascript/css3 tourner chaque fois que je clique dessus. Cela fonctionne, mais seulement la première fois que je clique dessus. Chaque fois après, je reçois l'alerte, ce qui signifie que ce n'est pas une erreur javascript - mais pas d'animation.

Voici ma page simple -

<script> 
    function rotate(box) 
    { 
    alert('start'); 
    box.style.webkitTransform = 'rotate(360deg)'; 
    } 
</script> 

<style> 
#box{ height:100px; width:100px; border:1px solid red; -webkit-transition: -webkit-transform 1s ease-out; } 
</style> 

<div id='box' onclick='rotate(this);'></div> 

je me suis dit qu'il doit y avoir quelque chose que je dois mettre après la rotate() pour lui dire de revenir à la scène en commençant de manière à pouvoir tourner à nouveau 360 .

Answer 1

Je réutilise un script que j'ai créé précédemment. Il devrait maintenant supporter Mozilla aussi.

<!-- head part --> 
<script type="text/javascript"> 
var angle = 0; //Current rotation angle 
var nbSteps = 30; //More steps is more fluid 
var speed = 1000; //Time to make one rotation (ms) 
var count = 0; //Count the nb of movement (0..nbSteps-1) 
var element = null; 

/** 
* Rotate the element passed 
*/ 
function rotate(box) { 
    if(count == 0) { 
     element = box; 
     rotateLoop(); 
    } 
} 

/** 
* Recursive method that rotate step by step 
*/ 
function rotateLoop() { 
    angle-=360/nbSteps; 

    setElementAngle(angle); 
    count++; 

    if(count < nbSteps) { 
     setTimeout("rotateLoop()",speed/nbSteps); 
    } 
    else { 
     count=0; 
     setElementAngle(0); //Just to be sure 
    } 
} 

/** 
* Use for the rotation 
*/ 
function setElementAngle(angle) { 
    var rotationStyle = "rotate(" + (360-angle) + "deg)"; 
    element.style.WebkitTransform = rotationStyle; 
    element.style.MozTransform = rotationStyle; 
    element.style.OTransform = rotationStyle; 
} 
</script> 

<style> 
#box{ 
    height:100px; 
    width:100px; 
    border:1px solid red; 
    } 
</style> 

<!-- body part --> 
<div id='box' onclick="rotate(this);"></div> 

Answer 2

Edit: En supposant que vous voulez qu'il soit complètement CSS:

transitions Webkit sont actuellement testés et sont très rugueux. Surtout pour ce que tu veux faire. Puisque ce sont des "transformations", et que la chaîne de style est assez complexe, cela crée un défi désagréable.

La meilleure chose à faire pour inverser la rotation tous les clic:

<script> 
function rotate(box) 
{ 
    box.style.webkitTransform = box.style.webkitTransform == "rotate(360deg)" ? "rotate(0deg)" : "rotate(360deg)"; 
} 
</script> 

<style> 
#box{ height:100px; width:100px; border:1px solid red; -webkit-transition: -webkit-transform 1s ease-out; } 
</style> 

<div id='box' onclick='rotate(this);'></div> 

Ou vous aurez à traiter avec beaucoup de codage dangereux, ou javascript alternatives.