javascript - 动画持续时间在 Safari 中表现不正常

Question

我们正在做一个简单的元素，我们在其中使用 CSS 动画。 我们正在尝试使用 JavaScript 更改动画持续时间。 更改动画持续时间适用于除 Safari 和 iOS 之外的所有浏览器。

我们正在使用此代码来更改动画持续时间。

document.getElementById("circle").style.animationDuration = data.pulse+"ms"
document.getElementById("circle").style.webkitAnimationDuration = data.pulse+"ms"

这是CSS:

@keyframes pulse {       
            0% {transform: scale(0); opacity: 0;}
            30% {opacity: 1;}   
            100% {opacity: 0; transform: scale(0.8);}
        }

        @-webkit-keyframes pulse {       
            0% {-webkit-transform: scale(0); opacity: 0;}
            30% {opacity: 1;}   
            100% {opacity: 0; -webkit-transform: scale(0.8);}
        }

        @-moz-keyframes pulse {       
            0% {-moz-transform: scale(0); opacity: 0;}
            30% {opacity: 1;}
            100% {opacity: 0; -moz-transform: scale(0.8);}
        }

在 safari 中，它运行一次，之后对象以其原始比例保持静止。

我们尝试了几种不同的方式来定义 webkitAnimationDuration; 例如 ["-webkit-animation-duration"]

非常感谢您的帮助!

Answer 1

我也遇到过这个问题，通过强制 Safari 在更改动画持续时间后重新渲染元素来解决。

var circle = document.getElementById("circle");
circle.style.animationDuration = data.pulse+"ms";
circle.style.display = "none";
setTimeout(() => circle.style.display = "block", 0);

通过短暂隐藏然后显示元素，Safari 将使用新的动画持续时间呈现它。