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 webview是我的主要开发平台）上更生动，而不是在Chrome上。

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

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

提前致谢，

丹

Answer 1

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

我尝试仅使用jQuery获得相同的结果，并且它适用于iPhone 4s，iOS6：

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

这是 demo 。

CSS Transition：在翻译左边缘时修复div的右边缘位置

1 个答案: