相关疑难解决方法(0)

我有两个绝对定位的div元素重叠.两者都通过css设置了z-index值.我使用translate3dwebkit变换在屏幕上为这些元素设置动画,然后再返回到屏幕上.变换后,元素不再遵循其设定z-index值.

任何人都可以解释一旦我对它们进行webkit转换后,div元素的z-index/stack-order会发生什么？并解释我可以做些什么来保持div元素的堆栈顺序？

以下是有关我如何进行转换的更多信息.

在转换之前,每个元素都通过css获取这两个webkit转换值(我使用jQuery来执行.css()函数调用:

element.css({ '-webkit-transition-duration': duration + 's' });
element.css({ '-webkit-transition-property': '-webkit-transform' });

然后使用translate3d -webkit-transform对元素进行动画处理:

element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px, 0, -1px)' });

顺便说一句,我已经尝试将第三个参数设置translate3d为几个不同的值,以尝试在3d空间中复制堆栈顺序,但没有运气.

此外,iPhone/iPad和Android浏览器是我的目标浏览器,此代码需要运行.两者都支持webkit转换.

问题

我试图让一个层看起来像是一堵墙倒塌,露出它背后的层.我已经设置了两个固定的div位置."Wall"div的z-index为9999,"Background"div的z-index为0;

在我测试的Webkit浏览器(Safari/IOS)中,似乎一旦动画在"墙"上开始,z索引就会丢失或被忽略,导致"墙"层突然消失在背景div后面.

关于如何保留图层的z索引的任何想法？提前致谢!

示例代码 (注意:底部的jsFiddle)

HTML代码

<div id="wall">
    This is the wall
</div>

<div id="background">
    This is the background
</div>

<button id="start" style="float: right;">
Flip Down
</button>

一些javascript启用按钮

$('#start').click(function(){
    alert('Should Fall Down like a wall, revealing the background');
    $('#wall').addClass('animated flipDown');
});

CSS代码(来自animate.css)

#wall{
    background-color: #F00;
    width: 100px;
    height: 100px;
    position:fixed;
    top:0;
    left:0;
    z-index: 9999;
}

#background{
    background-color: #00F;
    width: 100px;
    height: 100px; 
    position:fixed;
    top:0;
    left:0;
    z-index: 0;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
} …

我在基于wordpress Underscores主题的响应式下拉菜单中遇到问题.

它在桌面上看起来不错,但不适用于包括iPad和iPhone在内的iOS Safari.

我也尝试将z-index添加到其他div中,但它不起作用.请帮我.谢谢.