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 替换，具有卡片翻转的效果。

问题是，在进行整页翻转之前，我已经使用 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 - 我只是重新定位div 具有 top 样式或转换 top 属性，我没有遇到透视问题。当然，这意味着我必须分别放弃流畅的动画或硬件加速。

此时，它看起来像是一个 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

DA,
我从这件事中学到了一些东西，谢谢。还，
记下 css 属性“translate3d”和“left”。翻译和定位有点不同。测试一下，将元素在 x 轴上平移 100px，将其“left”样式属性设置为 0px。验证一下，它将位于 x 轴上距当前平移点 0px 的位置（从 x 轴上的 100px 开始）。

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