7

我正在使用 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 错误。我会继续玩它。如果有人以前遇到过这种情况并找到了解决方法，我会全力以赴！

4

2 回答 2

6

解决方案！经过一夜的睡眠后，我仔细考虑了罪魁祸首以及如何处理它。这不一定是使用 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');
    });

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

编辑：更正了一个错字

于 2011-07-07T14:32:20.680 回答
2

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

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

于 2012-12-03T14:04:01.500 回答