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

Posted 2023-03-14

【中文标题】JavaScript .animate() 在 Iphone6 上不起作用

【英文标题】：JavaScript .animate() not working on Iphone6

【发布时间】：2021-04-12 22:30:08

【问题描述】：

我正在使用 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 上无法使用。

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

【参考方案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;
    

等等。

【讨论】：

对不起，我不明白。你能详细说明我在与我的 React 代码对话时需要做什么吗？谢谢