jQuery $ .css（）函数无法正确解释“动画延迟”（在webkit浏览器中！）

编辑 – 链接错误的codepen 这似乎只发生在webkit浏览器中。 在Firefox中它的工作原理。 在IE中，添加了正确的内联样式，但它没有添加前缀（即使我在javascript中指定’ms-animation-delay’而不仅仅是’animation-delay’

我正在玩一个试图复制一些Google Material效果的codepen（我知道它们在聚合物中有它们，我只是想尝试复制一些效果以获得乐趣）。 由于一些奇怪的原因，jQuery错误地将“animation：[value]”放入内联样式而不是“animation-delay：[value]”。 任何人都可以解释为什么以及如何解决这个问题？

这是codepen： 链接

JS：

$(document).ready(function(){ var lis = $("li"), str; for(var x=2; x<= lis.length; x++){ str=(0.2+ 0.1*(x-2))+"s"; lis.eq(x-1).css({"animation-delay": str}); } }); 

转换延迟也会发生这种情况。

Answer 1

看起来FireFox允许您通过子属性更新动画，例如我们可以通过更改属性animation-delay更改animation-delay 。 很遗憾其他浏览器（Chrome，Opera，IE ……）不支持更新动画的方式。 这意味着要更改动画，您必须将animation-name设置为一个全新的名称（新的关键帧名称）。 因此，如果您只想更改animation-delay ，则可能必须创建具有不同名称的2个关键帧（但它们应具有相同的内部键规则，只是不同的名称）。 然后使用新名称和所需的animation-delay重新应用整个animation ，如下所示：

 //the current animation: animation: display 5s infinite; //the updated animation: animation: display2 5s 1s infinite; 

如您所见，区别在于名称（ display2而不是display ），我们添加了1s display2的延迟。 这种方式适用于所有浏览器。

但是我注意到你只想用脚本来应用动画，所以最简单的事情就是删除CSS代码中的所有动画（只保留关键帧）并使用脚本应用动画，这样你就不需要了创建display关键帧的克隆（ display2 ）：

 $(document).ready(function(){ var lis = $("li"), str; for(var x=1; x<= lis.length; x++){ str=(200+ 100*(x-1))+"ms"; lis.eq(x-1).css({"animation": "display 5s " + str + " infinite"}); } }); 

更新了演示 。

Answer 2

 .attr('style','-webkit-animation-delay:'+str+';animation-delay:'+str);