相关疑难解决方法(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转换.

在分析不同CSS动画类型的jQuery鼠标事件时,我注意到translate3d导致悬停和其他事件无法正确触发.

在一个基本示例中,我从右到左为动画块列表设置动画.

在翻转时,我将悬停的LI背景设置为GREEN.

注意:为webkit构建测试

HTML

 <div class="container">
    <ul>
        <li>content</li>
        <li>content</li>
        ...
    </ul>
</div>

CSS

.container{
    position: absolute;
    left: 600px;
    top: 0;
}   

.container ul{
    list-style: none;
    width: 9999px;
}

.container ul li{
    width: 200px;
    height: 400px;
    float: left;
    background: red;
    margin: 4px;
}

.animate-3d{
    -webkit-transition: -webkit-transform 10s linear;
    -webkit-transform: translate3d(-6000px, 0px, 0px)
}

.animate-transition{
    transition: left 10s linear;
    left: -6000px;
}

jQuery的

$('.event').bind('click', function(){
    $('.container').addClass('animate-3d'); 
});

$('.event-transition').bind('click', function(){
    $('.container').addClass('animate-transition'); 
});

$('li').bind('mouseenter mouseleave', function(e){
    if(e.type == 'mouseenter')
        $(this).css('background', 'green');
    else
        $(this).css('background', …

我知道您可以通过对“转换”属性应用过渡来强制 GPU 加速以实现屏幕上元素的平滑动画，例如：

elem.style.transition = 'all 3s ease-out';
elem.style.transform = 'translateX(600px)';

但是我想知道如果您将第二行替换为以下内容会发生什么：

elem.style.left = '600px'; 

GPU加速会/可以针对“左”（或“顶”）属性，还是必须在转换属性上？在我看来，它应该支持 GPU 加速，但我无法从我读过的任何文档中获得最终答案。