Exécuter un code javascript l'un après l'autre

Question

J'ai une pile d'images qui se rangent les unes derrière les autres, quand je clique dessus, l'image courante devrait basculer vers le bas, mais le conteneur parent reste à la même position. Pour cette raison, je ne suis pas capable d'effectuer une action sur d'autres images.

J'ai choisi l'option de fournir une valeur d'index z inférieure à l'élément parent afin que cela ne cause pas de problème pour effectuer un événement sur d'autres images. Mais ça ne marche toujours pas.

Je peux ajouter une valeur d'index z, mais lors de l'exécution du code, le retournement et l'ajout de l'index z au parent sont exécutés en même temps. En raison de cette animation ne vient pas dans le bon sens. Je veux savoir comment je peux exécuter du code l'un après l'autre, exemple quand l'image retournée est terminée alors seulement je veux ajouter la valeur d'index de z à l'élément parent (f1_container) SO qu'elle ne posera pas de problème pour d'autres images.

S'il vous plaît aider

<div id="f1_container" class="f1_container"> 
    <div id="f1_card" class="shadow"> 
     <div class="front face"> 
      image goes here 

     </div> 
     <div class="back face center"> 
         image goes here 

     </div> 
     </div> 
</div> 


var flipImage=document.querySelectorAll('.shadow');  
for(j=0; j<flipImage.length; j++){ 
var currentFlipImage=flipImage[j]; 
currentFlipImage.addEventListener('click', function(event){ 

var currentElement=event.currentTarget; 
//this should be executed first 
currentElement.style.webkitTransform='rotateX(-120deg)'; 
and this one should execute after flipping is completely done 
this.parentNode.style.zIndex=-100; 
},false); 

} 

Answer 1

Je pense que cela peut être utile: http://gitorious.org/webkit/webkit/blobs/master/LayoutTests/animations/animation-end-event-destroy-renderer.html

Je commence par quelque chose comme ça à l'intérieur du gestionnaire d'événements clic et voir si cela fonctionne

var parentNode = this.parentNode; 
currentElement.addEventListener('webkitAnimationEnd', function() { 
    parentNode.style.zIndex=-100; 
}); 

espérons que cela est utile