javascript - 在 Safari 中设置动画延迟会覆盖动画属性，但在 Chrome 中不会

Question

Note, I am using the latest Safari (9.0.2) and the latest Chrome. I know that as of 9.0.x safari handles a lot more of the animation prefixes for you. Yay! Also, I've submitted a bug report.

在最简单的情况下，我正在尝试使用 JavaScript 为 CSS 关键帧动画设置 animation-delay 。代码如下:

el.style.setProperty("-webkit-animation-delay", "5s", "important");

现在在 Chrome 中，这会更新 animation-delay 属性，正如我所期望的那样仅。 animation 属性保持不变，这是我想要的:

然而，在 Safari 中，这会覆盖 animation 属性，这对我来说是不合适的:

显然这甚至不是一个有效的动画值。我基本上希望它在 Safari 中工作而不覆盖 animation 属性。是否有其他方法可以实现此目的？

CSS/HTML 室的想法是将类添加到 CSS，然后只需使用 classList.toggle 切换它，但是此动画延迟属性将动态并反复更改.这些值事先是未知的。

JSFiddle:https://jsfiddle.net/swakq13a/3/

Answer 1

编辑 - 我刚刚看到这个问题已经存在一年了。这个答案应该可以帮助任何谷歌搜索这个确切问题的人，如果这对你来说太晚了一年，我们深表歉意，Jimbo。

我能够通过使用速记重置整个动画属性来解决 Safari 中的问题(同时保持所有功能)。这可能不是 100% 理想，但它确实绕过了 Safari 错误，而没有产生我能看到的任何动画问题。

这是一个 JS Fiddle 示例，它显示了一个变量值:https://jsfiddle.net/andrewborem/5rb5ybe3/1/

注意 - 我删除了 setProperty 上的“重要”参数，因为它不再是必需的。此外，我从 CSS 中删除了 animation-delay 属性。

setTimeout(function() {
    var box = document.querySelector('#box');
    var variableDelay = "5s";
    box.style.setProperty("animation", "cycle-wide 2s " + variableDelay + " ease-in-out infinite both");
    alert(box.style.animation);
}, 1000);