Question

我有一堆图像一个接一个排列，当我点击它们时，当前图像应该向下翻转，图像向下翻转，但其父容器保持在同一位置。由于我无法对其他图像执行操作。

我选择了为父元素提供较小的z索引值，以便在其他图像上执行事件时不会出现问题。但它仍然无法正常工作。

我可以添加z索引值但是在运行代码时，同时执行翻转和向父项添加z索引。由于动画没有以正确的方式出现。

我想知道，我如何能够一个接一个地执行代码，例如当翻转图像完成时，我只想将z索引值添加到父元素（f1_container），这样就不会对其他图像造成问题。< / p>

请帮忙

<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;
});

希望这有用

一个接一个地执行javascript代码

1 个答案: