자바 스크립트 코드를 하나씩 실행하기

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

그

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

를 작동하는지 내가 클릭 이벤트 처리기 내부에 이런 식으로 뭔가 시작하고 볼 것

도움이되기를 바랍니다.