在 iOS 设备上停止 css 转换时元素会抖动

Question

正如我们所知，停止 css 过渡的唯一方法是将元素设置到当前位置（转换和翻译的计算样式）并将 "transition-duration" 设置为“0s”。我成功地停止了过渡。但是 iOS 设备有问题：

当我停止转换时，元素会停止并稍微摇晃。我发现原因是当我们获取元素的计算样式并设置变换值时，元素仍然会移动一小段距离，然后停在我们得到的位置。

这只出现在 iOS 设备上。它在我的 mac 上的 Chrome 中正常工作，即使在具有 iPhone6 模式的开发人员工具中也是如此。

有没有人发现和我一样的问题？

enter image description here

Answer 1

经过无数次实验，我发现唯一可靠的解决方案是......不使用 CSS 转换。这是 iOS 错误（在 Safari 和 Chrome 上重现），您只能等待并希望它在未来得到修复。

如果您正在使用 jQuery（最好是 jQuery3，因为它具有更好的动画性能），那么您可以像这样制作 "transform" 属性动画：

$element[0].foo = 0;

$element.animate({ foo : 1 }, {
  step: function(now, fx) {

    $(this).css( 'transform', 'translate(' + ( startX + ( (endX - startX) * now) ) + 'px, ' + ( startY + ( (endY - startY) * now) ) + 'px)' );

  },
  duration : speed
});

以后只需使用.stop()停止动画就没有问题了。

Answer 2

通过转换启用 3D 引擎：translate3d(0, 0, 0)。

在 iOS 设备上停止 css 转换时元素会抖动

Element shakes when stop a css transition on iOS device

html

javascript

css

transition

ios