JavaScript .animate() 在 Iphone6 上不起作用

Question

我正在使用 react 来为 svg 设置动画，例如：

handleImageLoadedLoadingScreen = (imgID, index) => {

const {
  originalImageStretch, 
  originalImageStretchArray, 
  viewportWidth
} = this.state;


let img = document.getElementById(imgID);

let originalImageHeight = img.getBoundingClientRect().width;
let loadingImgStrech = (viewportWidth/originalImageHeight)*1.02;

img.animate(
  [
    { transform: `rotateZ(90deg) translate(100%) scaleY(${loadingImgStrech})` },
    { transform: `rotateZ(90deg) translate(100%) scaleY(1)` },
  ], {
    duration: 1500,
    easing: "ease",
  }
);

}

因此： 1 - 首先，我计算 SVG 比例值 2 - 然后，我将值应用于 animate() 以进行过渡

我不能使用 CSS 敌人（我想）。

在 Iphone 10 上可以使用，但在 Iphone6 上无法使用。

我怎样才能让它在这个操作系统上工作？

Answer 1

您需要在 @keyframes 前面加上 -webkit-，并在其中包含 -webkit-prefixed 动画和过渡，而不是将它们包含在原始文件中

@keyframes:

@keyframes imageAnimation { 
    0% {
        opacity: 0;
        -webkit-opacity: 0;
        animation-timing-function: ease-in;
        -webkit-animation-timing-function: ease-in;
    }

变成：

@-webkit-keyframes imageAnimation {
    0% {
        -webkit-opacity: 0;
        -webkit-animation-timing-function: ease-in;
    }

@keyframes imageAnimation {
    0% {
        opacity: 0;
        animation-timing-function: ease-in;
    }

等等。