Question

我构建了一个有角度的应用程序，试图对图形进行缩放和平行移动。我使用css变换进行缩放（缩放）和移动（平移）部分，并使用css过渡进行动画处理。这在台式机浏览器（Windows上的Firefox和Chrome）上运行良好，但在IOS（iPad Air）上的Safari中出现了意外延迟。这总是大约2秒，并且不会改变。动画在该延迟后立即开始，并且似乎工作得很好。我注意到如果不使用scale-option，延迟就消失了，但是我不能不对整个div进行缩放，因为它需要与屏幕尺寸匹配。

我曾尝试使用其他动画可能性，例如ng-animate（https://github.com/jiayihu/ng-animate），但该库的缩放功能也可能会使用缩放，因为我对此也遇到了同样的问题。

一些简化的代码：我首先使用缩放参数初始化组件：

scaleUI() {
  var previewArea: HTMLElement = document.querySelector(".previewArea");
  previewArea.style.transform = "scale(0.3, 0.3)";
  previewArea.style.webkitTransform = "scale(0.3, 0.3)";
}

点击后，我设置新的缩放参数并转换值：

var previewArea: HTMLElement = document.querySelector(".previewArea");

previewArea.style.transitionProperty = "transform";
previewArea.style.webkitTransitionProperty = "transform";
previewArea.style.transitionDuration = "1s";
previewArea.style.webkitTransitionDuration = "1s";
previewArea.style.webkitTransitionDelay = "0.1s";
previewArea.style.transitionDelay = "0.1s";
previewArea.style.transitionTimingFunction = "ease";
previewArea.style.webkitTransitionTimingFunction = "ease";

previewArea.style.webkitTransform = "scale(0.5, 0.5)translate(-" + value1 + "px, -" + value2 + "px)";

即使单击后我移除了秤，也存在延迟。仅当我完全移除该组件的刻度后，延迟才消失。

有人可以推荐另一种可能不受此错误影响的缩放方法吗？还是有办法解决这个问题？

使用的iPad是iOS 12.3.1上的iPad Air 3。 iOS 12.3的iPad Air 2上存在相同的问题。 iOS 11.4的iPhone 7上没有延迟。

Answer 1

我稍后修复了该错误。不是通过使用其他方法缩放，而是通过更改背景图像。我使用了背景图片且文件大小很大。这似乎在移动设备上产生了延迟。当我将背景图像更改为较小的图像时，延迟消失了。

在Safari中使用Angular中的CSS动画化“ transform：scale（）”时出现不必要的延迟

1 个答案: