0

我正在尝试使用 CSS3 转换为 DIV 设置动画。示例 DIV 是：

HTML：

<div class="element"></div>

CSS：

.element {
  -webkit-transform: translate3d(0,0,0);
  -webkit-transition: -webkit-transform 2s linear, width 2s linear;
  position: absolute;
  left: 100px; top: 100px;
  height: 10px; width: 50px;
  background-color: black;
}

这意味着 DIV 在其容器中占据从 (100px, 100px) 到 (150px, 110px) 的区域 - 并且右边缘固定在 150px。

我希望 DIV 保持 150 像素的静态右边缘，同时我将左边缘从屏幕上移开，所以我一直在（通过 Javascript）向 DIV 应用一个转换类，如下所示：

CSS：

.transition {
  -webkit-transform: translate3d(-200px, 0, 0);
  width: 150px;
}

我看到的问题是宽度上的过渡跟不上转换后的 DIV 的左边缘，所以不是在大小和左位置上均匀增加，而是右边缘位置随着 DIV 滑动而波动不同的速率，轻微闪烁（取决于平台闪烁的程度）。

这个问题在 Mobile Safari（iPhone 上的 Phonegap webview 是我的主要开发平台）上发生得更加生动，而不是在 Chrome 上。

我在http://jsfiddle.net/XwuBz/上放了一个 JSFiddle 来演示它（在 iPhone 上查看它以查看它的发生）。

有没有其他方法可以达到这个最终结果？

提前致谢，

担

4

1 回答 1

0

好吧，iOS Safari 似乎在转换/变换方面存在一些奇怪的问题。

我尝试仅使用 jQuery 来实现相同的结果，并且它适用于 iPhone 4s、iOS6：

$('.element').animate({left:'-=200','width':'+=200'},2000);

这是一个演示。

于 2012-10-05T17:55:13.210 回答