在Safari中设置animation-delay会覆盖动画属性，但不会覆盖Chrome [英] Setting animation-delay in Safari overwrites animation property, but not in Chrome

问题描述

请注意，我使用的是最新的Safari（9.0.2）和最新的Chrome。我知道，从9.0.x safari处理了更多的动画前缀为你。好极了！此外，我已提交错误报告。

最简单的方法是， code> animation-delay 仅使用JavaScript为CSS关键帧动画。代码如下：

  el.style.setProperty（ -  webkit-animation-delay，5s重要）; 
  

现在在Chrome中，这会更新 animation-delay 属性，我期望仅。 动画属性保持不变，这是我想要的：

显然，这不是一个有效的动画值。我基本上希望这在Safari中工作，而不覆盖动画属性。是否有另一种方法来实现这一点？

CSS / HTML房间的想法是将类添加到CSS，然后只需切换 classList.toggle ，但是这个动画延迟属性将是动态的，并重复更改。

。

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

解决方案

编辑 - 我刚刚看到这个问题是一岁。这个答案应该可以帮助任何Googling这个确切的问题，道歉，如果它是一个太晚了，Jimbo。

我能够解决这个问题在Safari保持一切功能）通过简单地重置整个动画属性。这可能不是100％的理想，但它避开了Safari的bug，没有创建任何动画问题，我可以看到。

这里是一个例子JS Fiddle显示它与变量值： https://jsfiddle.net/andrewborem/5rb5ybe3/1/ p>

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

  setTimeout（function（）{
 var box = document.querySelector（'＃box'）; 
 var variableDelay =5s; 
 box.style.setProperty（animation，cycle （）; 
 alert（box.style.animation）; 
}，1000）; 
  

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.

At it's most simplest, I'm trying to set the animation-delay only using JavaScript for a CSS Keyframe animation. The code is as follows:

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

Now in Chrome, this updates the animation-delay property as I expect only. The animation property is left untouched, which is what I want:

In Safari, however, this overwrites the animation property, which for my purposes is not okay:

Obviously that's not even a valid animation value. I basically want this working in Safari without overriding the animation property. Is there an alternative method to achieve this?

The idea from the CSS / HTML room was to add the class to the CSS and then just toggle it with classList.toggle, however this animation delay property will be dynamic and repeatedly changed. These values are NOT known beforehand.

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

解决方案

EDIT - I just saw that this question was a year old. This answer should help anyone Googling for this exact issue, apologies if it is a year too late for you, Jimbo.

I was able to resolve the issue in Safari (while keeping everything functional) by just resetting the entire animation property with shorthand. This might not be 100% ideal, but it does circumvent the Safari bug without creating any animation issues that I can see.

Here is an example JS Fiddle showing it with a variable value: https://jsfiddle.net/andrewborem/5rb5ybe3/1/

NOTE - I removed the "important" argument on setProperty since it is no longer necessary. Additionally, I removed the animation-delay property from the CSS.

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);

这篇关于在Safari中设置animation-delay会覆盖动画属性，但不会覆盖Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！