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

【问题标题】：CSS Transition: Fix a div's right edge position while translating the left edgeCSS 过渡：在平移左边缘时修复 div 的右边缘位置
【发布时间】：2012-09-26 21:04:43
【问题描述】：

我正在尝试使用 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 上查看它以了解它的发生）。

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

提前致谢，

丹

【问题讨论】：

标签： iphone css webkit mobile-webkit

【解决方案1】：

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

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

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

这是一个demo。

【讨论】：