已编辑 - 链接了错误的代码笔 这似乎只发生在 webkit 浏览器中。在 Firefox 中,它按预期工作。在 IE 中,添加了正确的内联样式,但它不添加前缀(即使我在 javascript 中指定“ms-animation-delay”而不仅仅是“animation-delay”
我正在玩一个 codepen,试图复制一些 Google Material 效果(我知道他们有聚合物,我只是想尝试复制一些效果来取乐)。由于某些奇怪的原因,jQuery 错误地将“动画:[值]”而不是“动画延迟:[值]”放入内联样式中。谁能解释为什么以及如何解决?
这是代码笔: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});
}
});
这也会发生在转换延迟时。
最佳答案
看起来 FireFox 允许您通过子属性更新动画,例如我们可以通过更改属性 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
的延迟。这种方式适用于所有浏览器。
但是我注意到您只想使用脚本应用动画,所以最简单的做法是删除 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"});
}
});
Updated Demo .
关于jQuery $.css() 函数没有正确解释 "animation-delay"(在 webkit 浏览器中!),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24592846/