Выполнение кода JavaScript один за другим

Question

У меня есть стопка изображений, расположенных одна за другой, когда я нажимаю на них, текущее изображение должно перевернуться вниз, изображение переворачивается вниз, но его родительский контейнер остается на той же позиции. Из-за этого я не могу выполнять действия с другими изображениями.

Я выбрал вариант предоставления меньшего значения индекса z родительскому элементу, чтобы это не вызывало проблемы при выполнении события на других изображениях. Но все равно это не работает.

Я могу добавить значение z index, но при запуске кода выполняется одновременное переключение и добавление z index в parent. Из-за этого анимация идет не правильно.

Я хочу знать, как я могу выполнять код один за другим, например, когда переворачивание изображения завершено, только я хочу добавить значение индекса 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

Я бы начал с чего-то подобного в обработчике события click и посмотрел, работает ли он

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

надеюсь, что это полезно