webkit translate3d 问题 (peek-thru)答案

【问题标题】：webkit translate3d issues (peek-thru)webkit translate3d 问题 (peek-thru)
【发布时间】：2011-09-27 17:44:14
【问题描述】：

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

这在更简单的元素上效果很好......带有前/后 div 的 DIV，可能还有一两个额外的跨度。

但是当我尝试翻转一个更大的元素...即整个屏幕时，我会遇到重绘故障。当我交换 css 类开始转换时会发生什么，“底部”div 的部分弹出“顶部”div，然后翻转发生，然后它们再次弹出。并且不是整个元素都显示出来......它是沿轴拆分的元素的一半，我正在对其进行平移 3d 旋转。

关于什么可能导致这种情况的任何想法或理论？它在 iPad 上作为应用程序和 Safari 桌面上发生的情况相同，因此似乎是 webkit 问题。

会不会是一些 CSS 问题？或者尝试使用 Safari 无法处理的大背景图像的复杂嵌套元素进行全屏 translate3d 旋转？

更新 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 样式重新定位 div 或转换 top 属性，我没有得到窥视问题。当然，这意味着我必须分别放弃流畅的动画或硬件加速。

此时，它看起来像一个 webkit 错误。我会继续玩它。如果有人以前遇到过这种情况并找到了解决方法，我会全力以赴！

【问题讨论】：

标签： ios webkit cordova css-animations translate3d

【解决方案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');
    });

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

编辑：更正了一个错字

【讨论】：

@IanJamison 我知道这个答案已经有好几年了，但我不知道将“one”更改为“on”是否正确。根据我的理解，“on”基本上是一样的（正如一个人所说），但它不会在完成时删除事件处理程序。老实说，我不记得这是否会对这个特定的应用程序产生影响，但似乎有非常故意的理由有时会选择 one vs. on。

【解决方案2】：

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

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

【讨论】：