我有一堆图像一个接一个排列,当我点击它们时,当前图像应该向下翻转,图像向下翻转,但其父容器保持在同一位置。由于我无法对其他图像执行操作。
我选择了为父元素提供较小的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);
}
答案 0 :(得分:0)
我认为这可能会有所帮助: 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;
});
希望这有用