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

【问题标题】：Setting animation-delay in Safari overwrites animation property, but not in Chrome在 Safari 中设置动画延迟会覆盖动画属性，但在 Chrome 中不会
【发布时间】：2016-04-15 19:26:58
【问题描述】：

注意，我使用的是最新的 Safari (9.0.2) 和最新的 Chrome。我知道从 9.0.x 开始，safari 会为您处理更多的动画前缀。耶！另外，我已经提交了一份错误报告。

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

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/

【问题讨论】：

你有没有试过不使用setProperty，而是直接通过el.style.webkitAnimationDelay = "5s"赋值？（必要时用适当的供应商前缀替换。）
是的，使用实际名称而不是 setProperty 时似乎没有更新。
您需要在属性名称中包含适当的供应商前缀。 box.style.webkitAnimationDelay = "200s";jsfiddle.net/swakq13a/6
看起来像一个特定于 Safari 的错误。 // 是否需要预先设置未知的动画延迟值，还是设置很多不同的值？否则，简单的解决方法可能是不通过 JS 设置此值，而仅通过 JS 更改/添加到元素的类，然后让您的样式表根据类以不同的延迟格式化元素。
Bug-wise，我找不到任何描述类似问题的东西。我在考虑类似你的建议...animation.duration + "s " + animation.timingFunction + " " + animation.delay + "s " + animation.iterationCount + " " + animation.direction + " " + animation.fillMode + " " + animation.playState + " " + animation.name;.

标签： javascript css css-animations

【解决方案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);

【讨论】：