webkit translate3d问题(peek-thru)

Question

我正在使用PhoneGap构建一个iOS应用程序.我正在使用translate3d CSS动画来创建'翻转'效果.

这适用于更简单的元素......带有前/后div的DIV,可能还有一两个额外的跨度.

但是当我试图翻转一个更大的元素......即整个屏幕时,我会重绘毛刺.一旦我交换css类开始转换,"底部"div的部分弹出"顶部"div,然后翻转发生,然后它们再次弹出,会发生什么.并且它不是显示的整个元素......它是沿着轴分割的元素的一半,我正在进行平移3d旋转.

关于可能导致这种情况的任何想法或理论？它在iPad上作为应用程序和在Safari中的桌面上都是相同的,因此似乎是一个webkit问题.

可能是一些CSS问题？或者是否尝试使用具有大背景图像的复杂嵌套元素进行全屏translate3d旋转,这比Safari可以处理的更多？

更新1:

我在缩小问题方面取得了进展.

发生的事情是,当我执行translate3d翻转时,"偷看"的元素恰好是之前通过translate3d定位的子元素.

我希望使用translate3d转换的"页面"结构:

<div id="frontbackwrapper">
    <div id="front">    
    </div><!--/front-->
    <div id="back">  
    </div><!--/back-->
</div><!--/frontbackwrapper-->  

这适用于它自己.前部div由后部div替换,具有卡片翻转效果.

问题是在完成整页翻页之前,我已经#front使用translate3d 在div中设置了一些元素:

<div id="frontbackwrapper">
    <div id="front">  

        <div class="modal"></div>  

    </div><!--/front-->
    <div id="back">  
    </div><!--/back-->
</div><!--/frontbackwrapper--> 

CSS示例:

.modal {
    width: 800px;
    height: 568px;
    position: absolute; 
    left: 112px;
    z-index: 100;
    -webkit-transition-duration: 1s;
    -webkit-transform: translate3d(0,-618px,0); /* set off screen by default */
 }
.modal.modalOn {
    -webkit-transform: translate3d(0,80px,0); /* slides the div into place */
 }

如果 - 而不是使用translate3d - 我只是用top样式重新定位div 或转换top属性,我没有得到偷看问题.当然,这意味着我必须分别放弃光滑的动画或硬件加速.

此时,它看起来像一个webkit错误.我会继续玩它.如果有人之前遇到过这种情况并找到了解决方法,我全都耳朵!

Answer 1

解!经过一夜的睡眠,我仔细考虑了罪魁祸首以及如何处理它.它不一定是使用translate3d为子元素设置动画的行为,而是在翻译的元素在使用translate3d对其父级进行动画处理时具有CSS属性的面部.

修复方法是首先为子元素设置动画,然后一起删除翻译样式.

CSS结构现在是:

/* default class for the start of your element */
.modal-startposition {
  -webkit-transition-duration: 1s;
  -webkit-transform: translate3d(0,-618px,0);
  }

/* add this class via jQuery to then allow
   webkit to animate the element into position */
.modal-animateposition {
  -webkit-transform: translate3d(0,80px,0);
}

/* when animation is done, remove the above class
   and replace it with this */
.modal-endposition {
  top: 80px;
}

还有一些示例jQuery:

//[attach a click event to trigger and then...]
$myModal
    .addClass("modal-animateposition")
    .on('webkitTransitionEnd',function () {
         $myModal
            .removeClass('modal-startposition')
            .removeClass('modal-animateposition')
            .addClass('modal-endposition');
    });

有点乏味,但它完全修复了屏幕重绘问题.

编辑:更正了一个错字