Javascript 动态创建和应用CSS3动画

jQuery中的

.animate（）

函数不允许对所有CSS3可设置动画的属性设置动画（例如，

背景色

）。是否有一种很好的标准方法可以动态地创建、应用和删除CSS3动画到页面上的元素

---

我目前正在学习这个例子，但这是笨重的，感觉不对。虽然它可以工作，但我希望有一个更好的解决方案（使用库或类似的东西）。

是的，我们可以动态创建、应用CSS3动画并将其删除到页面中的元素

要动态创建动画，我们需要使用

insertRule

或

addRule

函数添加

@关键帧

规则并将其附加到样式表中。添加动画后，将其应用于元素非常简单，我们只需要通过内联样式将所需的属性值设置为

动画

属性。再次删除它非常简单，我们只需要在需要删除时将该值设置回null

在下面的代码片段中，我首先插入了一个动画，并将其应用于加载的元素。当动画开始时，元素触发

animationstart

事件。在这个事件监听器中，我获得了正在设置动画的元素的

outerHTML

，并将其打印出来，以显示内联样式是如何显示的，然后在动画结束时（使用

animationend

事件监听器），我删除了内联样式，并在其后面打印了

outerHTML

，以显示它如何不再具有动画

没有其他更简单的方法可以动态创建CSS3动画。所有可能的解决方案都将涉及使用基本的

insertRule

、

addRule

或特定于关键帧的

appendRule

功能（用于将规则附加到现有关键帧）创建关键帧并将其附加到样式表中

var elm=document.querySelector（'.to animate'）；
var op=document.querySelector（'.output'）；
var animName=“摇动起来”，
animDuration=“3s”，
animTiming=“线性”，
animFillMode=“forwards”，
animitation=“3”；
var ruleText=“0%{transform:translateY（0px）；}”；
ruleText+=“25%{transform:translateY（10px）；}”；
ruleText+=“75%{transform:translateY（-10px）；}”；
ruleText+=“100%{transform:translateY（0px）；}”；
/*来自David Walsh的博客*/
函数addCSSAnimRule（工作表、名称、规则、索引）{
如果（“插入规则”在工作表中）{
sheet.insertRule（“@keyframes”+name+“{+rules+“}”，索引）；
}else if（表格中的“添加规则”）{
sheet.addRule（“@keyframes”+名称、规则、索引）；
}
}
/*自述*/
函数ApplyImation（elm、名称、持续时间、计时、迭代、填充模式）{
elm.style[“animation”]=名称+持续时间+计时+迭代+填充模式；
/*或者，如果要单独设置它们，请在上面的行中添加注释并取消注释
elm.style[“animationName”]=名称；
elm.style[“animationDuration”]=持续时间；
elm.style[“animationTimingFunction”]=计时；
elm.style[“animationIterationCount”]=迭代
elm.style[“animationFillMode”]=fillmode*/
}
addCSSAnimRule（document.styleSheets[0]，animName，ruleText，0）；
应用动画（elm、animName、animDuration、animTiming、animIteration、animFillMode）；
/*打印输出*/
elm.addEventListener（“animationstart”，函数（e）{
op.textContent=“Animation”+e.animationName+“已开始。”；
op.textContent+=“\n\n元素的外部HTML:\n”；
op.textContent+=elm.outerHTML；
op.textContent+=“\n\n------------------------------------------------------------------------------------------------------------------------”；
});
elm.addEventListener（“动画结束”，函数（e）{
elm.removeAttribute（“style”）；/*删除动画*/
op.textContent+=“\n动画”+e.animationName+”已结束。“；
op.textContent+=“\n\n元素的外部HTML:\n”；
op.textContent+=elm.outerHTML；
op.textContent+=“\n\n------------------------------------------------------------------------------------------------------------------------”；
});
。设置动画{
高度：100px；
宽度：100px；
利润率：10px；
边框：1px纯红；
}

看一看，它没有提到背景色或其他jquery不能做的事情。是我遗漏了什么，还是bounce.js是jquery.animate（）的另一个实现？你能用addClass和removeClass在css中设置你的动画吗？动画本身需要像这样动态+1唯一缺少的是跨浏览器支持。（或者至少是支持CSS3的浏览器的供应商前缀。）您可以使用David的另一个代码片段：。@BramVanroy:非常感谢。实际上，我在使用David的脚本（或使用类似prefix free的库）和让他们找到浏览器所需的前缀之间左右为难。我想我会采用第二种方法来避免代码过于臃肿（但你的评论肯定很有价值）。我不知道PrefixFree能够在DOM更改/样式规则插入后添加供应商前缀，但我查了一下，你说的没错！（可能需要正常工作。）是的@BramVanroy，它还公开了一个变量（PrefiFree.prefix），我们可以使用它来获取适用于用户浏览器的前缀。@BramVanroy:这就是我所说的。使用前缀free的公开函数和变量。在所有浏览器中测试并运行（前缀测试是在较早版本的Safari中完成的）。