jQuery $.css() 函数无法正确解释"animation-delay"(在 webkit 浏览器中！

Question

编辑-链接错误的代码 这似乎只发生在webkit浏览器中。在firefox中，它按预期工作。在IE中，添加了正确的内联样式，但它不添加前缀(即使我在javascript中指定'ms-animation-delay'而不是'animation-delay'

)

我正在玩一个codepen试图复制一些谷歌材料的效果(我知道他们有他们的聚合物，我只是想尝试复制一些效果的乐趣)。由于一些奇怪的原因，jQuery错误地将"animation: [value]"而不是"animation-delay: [value]"放入了内联样式中。有人能解释一下为什么以及如何做一个工作吗?

这是codependency: link

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来更改动画延迟。遗憾的是，其他浏览器(Chrome, Opera, IE…)不支持这种更新动画的方式。这意味着要改变动画，您必须将animation-name设置为一个全新的名称(新的关键帧名称)。所以如果你只是想改变animation-delay，你可能需要创建两个具有不同名称的关键帧(但它们应该具有相同的内部关键规则，只是名称不同)。然后用新名称和所需的animation-delay重新应用整个animation，如下所示:

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

可以看到，区别在于名称(display2而不是display)，并且我们添加了1s的延迟。这种方法在所有浏览器中都有效。

然而，我注意到你只是想使用脚本应用动画，所以最简单的事情就是删除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);