一次執行javascript代碼

Question

我有一堆圖像排列在一起，當我單擊它們時，當前圖像應向下翻轉，圖像向下翻轉，但其父容器保持在同一位置。 因此，我無法對其他圖像執行操作。

我選擇了為父元素提供較小的z索引值的選項，以便在其他圖像上執行事件不會引起問題。 但是仍然無法正常工作。

我能夠添加z索引值，但是在運行代碼時，一次執行翻轉和將z索引添加到父級的操作。 由於該動畫沒有以正確的方式出現。

我想知道，我如何才能依次執行代碼，例如翻轉圖像完成時的示例，那么我只想向父元素（f1_container）添加z索引值，這樣就不會對其他圖像造成問題。

請幫忙

<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

我將從click事件處理程序中的類似內容開始，看看是否可行

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

希望這會有所幫助