Question

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

我正在尝试使用codepen来复制一些Google Material效果（我知道他们将它们放在聚合物中，我只想尝试复制一些效果以获得乐趣）。由于一些奇怪的原因，jQuery错误地放置了动画：[值]＆＃34;进入内联样式而不是＆＃34;动画延迟：[值]＆＃34;。任何人都可以解释为什么以及如何解决这个问题？

以下是codepen：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，则可能必须创建具有不同名称的2个关键帧（但它们应具有相同的内部键规则，只是不同的名称）。然后使用新名称和所需的animation重新应用整个animation-delay，如下所示：

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

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

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

$(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"});
 }
});

Updated Demo

Answer 2

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

jQuery $ .css（）函数不解释＆＃34;动画延迟＆＃34;正确（在webkit浏览器中！）

2 个答案:

Updated Demo