CSS 过渡：在平移左边缘时修复 div 的右边缘位置

Question

我正在尝试使用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保持150px的静态右边缘，同时将左边缘从屏幕上平移，所以我一直在(通过Javascript)向DIV应用一个转换类，如下所示：

CSS：

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

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

这个问题在Mobile Safari上发生得更为生动(iPhone上的Phonegap网络视图是我的主要开发平台)，而不是在Chrome上。

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

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

提前感谢

Dan

Answer 1

看来iOS Safari在转换/转换方面存在一些奇怪的问题。

我试着只使用jQuery来实现同样的结果，它在iPhone 4s、iOS6上运行：

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

这是一个演示。