webkit translate3d问题(预览)

Question

我正在用PhoneGap构建一个iOS应用。我使用translate3d CSS动画来创建“翻转”效果。

这在更简单的元素上工作得很好...一个有前后DIV的DIV，可能还有一两个额外的跨度。

但是，当我试图在整个屏幕上翻转一个更大的element...namely时，我得到了重绘故障。当我交换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。

问题是，在进行整页翻转之前，我已经使用translate3d在#front 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样式或转换top属性来重新定位div，我就不会遇到窥视问题。当然，这意味着我必须分别放弃平滑的动画和硬件加速。

在这一点上，它看起来像是一个webkit bug。我会继续玩它。如果有人以前遇到过这种情况，并找到了解决方法，我洗耳恭听！

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

有点繁琐，但它完全解决了屏幕重绘的问题。

编辑:更正了一个拼写错误的

Answer 2

爸爸，我从中学到了一些东西，谢谢。另外，注意css的属性，'translate3d‘和'left’。翻译和定位略有不同。测试它，在x轴上平移一个元素100px，将它的'left‘样式属性设置为0px。验证，它将从当前平移点(从x轴上的100px开始)位于x轴上的0px处。

这会在拖放和动画算法中产生数学错误，并且很容易被注意到(重画毛刺，跳过，位置重置)，并且成为一个挑战，因为translate3d不再更新元素offsetLeft或' left‘样式属性(为了防止回流，为了优化)，所以解析真正的left元素是基于知道是否正在使用translate3d或left。如果您是游戏开发人员，跟踪内部变量中的x，y是与元素位置保持同步的方法。希望这会有更多的帮助。