javascriptコードを次々に実行

Question

画像のスタックを別のものの背後に配置します。クリックすると、現在の画像が反転し、画像が反転しますが、その親コン​​テナは同じ位置にとどまります。そのため、私は他の画像でアクションを実行することができません。

私は他のイメージでイベントを実行するのに問題を起こさないように、親要素に小さいzインデックス値を提供するオプションを選択しました。しかし、まだそれは動作していません。

私はzのインデックス値を追加することができますが、コードを実行すると、親にzインデックスをフリップして追加することが一度に実行されます。そのアニメーションが正しい方法で来ていないためです。

私が知りたいのは、どのようにコードを実行することができますか、画像を反転すると、zインデックスの値を親要素（f1_container）に追加したいので、他の画像に問題は生じません。

私はこれが役に立つかもしれないと思う

<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

を助けてください： http://gitorious.org/webkit/webkit/blobs/master/LayoutTests/animations/animation-end-event-destroy-renderer.html

私はクリックイベントハンドラ内でこのような何かを開始し、それが

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

を動作するかどうかを確認したいです

これは役に立ちました