动态创建和应用CSS3动画 [英] Dynamically create and apply CSS3 animations
问题描述
jQuery中的 .animate（）函数不允许所有CSS3动画属性都为动画（例如 background-color ）。有没有一个好的，标准的方式动态创建，应用和删除CSS3动画页面上的元素？
我目前正在关注示例这里，但这是笨重的，感觉不对。虽然它工作，我宁愿一个更好的解决方案（使用库或类似的东西）。
创建，应用和删除CSS3动画到页面中的元素。
要动态创建动画，我们需要使用 insertRule 或 addRule 函数添加 @keyframes 规则并将其附加到样式表。一旦添加了动画，将它应用到元素很简单，我们只需要通过内联样式将所需的属性值设置为 animation 属性。删除它agian很简单，我们只需要在需要删除时将其值设置为null。
在下面的代码段中，我首先插入了一个动画并将其应用于负载上的元件。当动画开始时，元素触发 animationstart 事件。在这个事件侦听器中，我获得了正在动画的元素的 outerHTML ，并打印它以显示如何存在内联样式，然后在动画结束时使用 animationend 事件侦听器），我删除了内联样式，并打印了 outerHTML 之后，
动态创建CSS3动画 没有其他更简单的方法。所有可能的解决方案将涉及使用基本 insertRule ， addRule创建和附加或关键帧特定 @keyframes appendRule 函数（用于将规则附加到现有关键帧）。
var elm = document.querySelector（'。to-animate'）; var op = document.querySelector（'。output'）; var animName =shake-up -down，animDuration =3s，animTiming =linear，animFillMode =forward，animIteration =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，name，rules，index）{if（insertRulein sheet）{sheet.insertRule（@ keyframes+ name +{+ rules +} } else if（addRulein sheet）{sheet.addRule（@ keyframes+ name，rules，index）; }} / *自写* /函数applyAnimation（elm，名称，持续时间，时间，迭代，填充模式）{elm.style [animation] = name ++ duration + + fillmode; / *或者如果要单独设置它们，请注释上面的行并取消注释此elm.style [animationName] = name; elm.style [animationDuration] = duration; elm.style [animationTimingFunction] =时间; elm.style [animationIterationCount] = iteration elm.style [animationFillMode] = fillmode; * /} addCSSAnimRule（document.styleSheets [0]，animName，ruleText，0）; applyAnimation（elm，animName，animDuration，animTiming， animlteration，animFillMode）; / *打印输出* / elm.addEventListener（animationstart，function（e）{op.textContent =Animation+ e.animationName +has started。; op.textContent + = \\ n \\\
Element的外部HTML：\\\
; op.textContent + = elm.outerHTML; op.textContent + =\\\
\\\
---------------- -------------------------------------------------- - ;;}）; elm.addEventListener（animationend，function（e）{elm.removeAttribute（style）; / *删除动画* / op.textContent + =\\\
Animation+ e.animationName +已结束。; op.textContent + =\\\
\\\
Element的外部HTML：\\\
; op.textContent + = elm.outerHTML; op.textContent + =\\\
\\\
------------------------------------------ ------------------------------------;}）;
.to-animate {height：100px; width：100px; margin：10px; border：1px solid red;}
< div class = 'to-animate'>< / div>< pre class ='output'>< / pre>
/ p>
此方法可用于动态创建和使用任何类型的动画。下面的代码段创建并添加了背景颜色动画。
var animName =bgColor，animDuration =4s，animTiming =linear，animFillMode =0; var elm = document.querySelector（'。to-animate'）; var op = document.querySelector（' forward，animlteration =3; var ruleText =0％{background-color：red;}; ruleText + =25％{background-color：orange;}; ruleText + =50％颜色：黄色;}; ruleText + =75％{background-color：pink;}; ruleText + =100％{background-color：red;}; / *来自David Walsh的博客* /函数addCSSAnimRule索引）; {if（insertRulein sheet）{sheet.insertRule（@ keyframes+ name +{+ rules +} } else if（addRulein sheet）{sheet.addRule（@ keyframes+ name，rules，index）; }} / *自写* /函数applyAnimation（elm，名称，持续时间，时间，迭代，填充模式）{elm.style [animation] = name ++ duration + + fillmode; / *或者如果要单独设置它们，请注释上面的行并取消注释此elm.style [animationName] = name; elm.style [animationDuration] = duration; elm.style [animationTimingFunction] =时间; elm.style [animationIterationCount] = iteration elm.style [animationFillMode] = fillmode; * /} addCSSAnimRule（document.styleSheets [0]，animName，ruleText，0）; applyAnimation（elm，animName，animDuration，animTiming， animlteration，animFillMode）; / *打印输出* / elm.addEventListener（animationstart，function（e）{op.textContent =Animation+ e.animationName +has started。; op.textContent + = \\ n \\\
Element的外部HTML：\\\
; op.textContent + = elm.outerHTML; op.textContent + =\\\
\\\
---------------- -------------------------------------------------- - ;;}）; elm.addEventListener（animationend，function（e）{elm.removeAttribute（style）; / * remove the animation * / op.textContent + =\\\
Animation+ e.animationName +已结束。; op.textContent + =\\\
\\\
Element的外部HTML：\\\
; op.textContent + = elm.outerHTML; op.textContent + =\\\
\\\
------------------------------------------ ------------------------------------;}）;
.to-animate {height：100px; width：100px; margin：10px; background-color：red;}
< div class = 'to-animate'>< / div>< pre class ='output'>< / pre>
/ p>
跨浏览器版本：
此处是一个跨浏览器版本，支持旧版浏览器使用由前缀免费库公开的方法。这是在IE10 +，Edge，Chrome v50（dev-m），Firefox v43，Opera v35测试。在Win 10上的Safari 5.1.7中测试前缀版本。
The .animate() function in jQuery does not allow all CSS3 animatable properties to be animated (for example, background-color). Is there a nice, standard way to dynamically create, apply, and remove CSS3 animations to elements on the page?
I'm currently following the example here but this is clunky and feels wrong. While it works, I would rather a better solution (using a library or something like that).
Yes, we can dynamically create, apply and remove CSS3 animations to an element in the page.
To dynamically create an animation, we need to use the insertRule or addRule functions to add the @keyframes rules and append it to the stylesheet. Once the animation is appended, applying it to the element is very simple, we just need to set the required property value to the animation property via inline styles. Removing it agian is very simple, we just need to set the value back to null when it needs to be removed.
In the below snippet, I have first inserted an animation and applied it to the element on load. When the animation starts, the element fires the animationstart event. Within this event listener, I've obtained the outerHTML of the element that is being animated and printed it to show how inline style is present and then at the end of the animation (using the animationend event listener), I've removed the inline style and printed the outerHTML after it to show how it no longer has the animation.
There are no other simpler ways to dynamically create CSS3 animations. All possible solutions will involve creating and appending @keyframes to the stylesheets using basic insertRule, addRule or the keyframes specific appendRule function (which is used to append rules to an existing keyframe).
var elm = document.querySelector('.to-animate');
var op = document.querySelector('.output');
var animName = "shake-up-down",
animDuration = "3s",
animTiming = "linear",
animFillMode = "forwards",
animIteration = "3";
var ruleText = "0% {transform: translateY(0px);}";
ruleText += "25% {transform: translateY(10px);}";
ruleText += "75% {transform: translateY(-10px);}";
ruleText += "100% {transform: translateY(0px);}";
/* From David Walsh's blog */
function addCSSAnimRule(sheet, name, rules, index) {
if ("insertRule" in sheet) {
sheet.insertRule("@keyframes " + name + "{" + rules + "}", index);
} else if ("addRule" in sheet) {
sheet.addRule("@keyframes " + name, rules, index);
}
}
/* Self written */
function applyAnimation(elm, name, duration, timing, iteration, fillmode) {
elm.style["animation"] = name + " " + duration + " " + timing + " " + iteration + " " + fillmode;
/* or if you want to set them individually, comment the above line and uncomment this
elm.style["animationName"] = name;
elm.style["animationDuration"] = duration;
elm.style["animationTimingFunction"] = timing;
elm.style["animationIterationCount"] = iteration
elm.style["animationFillMode"] = fillmode;*/
}
addCSSAnimRule(document.styleSheets[0], animName, ruleText, 0);
applyAnimation(elm, animName, animDuration, animTiming, animIteration, animFillMode);
/* to print output */
elm.addEventListener("animationstart", function(e) {
op.textContent = "Animation " + e.animationName + " has started.";
op.textContent += "\n\nElement's Outer HTML: \n";
op.textContent += elm.outerHTML;
op.textContent += "\n\n------------------------------------------------------------------------------";
});
elm.addEventListener("animationend", function(e) {
elm.removeAttribute("style"); /* remove the animation */
op.textContent += "\nAnimation " + e.animationName + " has ended.";
op.textContent += "\n\nElement's Outer HTML: \n";
op.textContent += elm.outerHTML;
op.textContent += "\n\n------------------------------------------------------------------------------";
});
.to-animate {
height: 100px;
width: 100px;
margin: 10px;
border: 1px solid red;
}
<div class='to-animate'></div>
<pre class='output'></pre>
This method can be used to dynamically create and use any type of animation. Below snippet creates and adds a background-color animation.
var elm = document.querySelector('.to-animate');
var op = document.querySelector('.output');
var animName = "bgColor",
animDuration = "4s",
animTiming = "linear",
animFillMode = "forwards",
animIteration = "3";
var ruleText = "0% {background-color: red;}";
ruleText += "25% {background-color: orange;}";
ruleText += "50% {background-color: yellow;}";
ruleText += "75% {background-color: pink;}";
ruleText += "100% {background-color: red;}";
/* From David Walsh's blog */
function addCSSAnimRule(sheet, name, rules, index) {
if ("insertRule" in sheet) {
sheet.insertRule("@keyframes " + name + "{" + rules + "}", index);
} else if ("addRule" in sheet) {
sheet.addRule("@keyframes " + name, rules, index);
}
}
/* Self written */
function applyAnimation(elm, name, duration, timing, iteration, fillmode) {
elm.style["animation"] = name + " " + duration + " " + timing + " " + iteration + " " + fillmode;
/* or if you want to set them individually, comment the above line and uncomment this
elm.style["animationName"] = name;
elm.style["animationDuration"] = duration;
elm.style["animationTimingFunction"] = timing;
elm.style["animationIterationCount"] = iteration
elm.style["animationFillMode"] = fillmode;*/
}
addCSSAnimRule(document.styleSheets[0], animName, ruleText, 0);
applyAnimation(elm, animName, animDuration, animTiming, animIteration, animFillMode);
/* to print output */
elm.addEventListener("animationstart", function(e) {
op.textContent = "Animation " + e.animationName + " has started.";
op.textContent += "\n\nElement's Outer HTML: \n";
op.textContent += elm.outerHTML;
op.textContent += "\n\n------------------------------------------------------------------------------";
});
elm.addEventListener("animationend", function(e) {
elm.removeAttribute("style"); /* remove the animation */
op.textContent += "\nAnimation " + e.animationName + " has ended.";
op.textContent += "\n\nElement's Outer HTML: \n";
op.textContent += elm.outerHTML;
op.textContent += "\n\n------------------------------------------------------------------------------";
});
.to-animate {
height: 100px;
width: 100px;
margin: 10px;
background-color: red;
}
<div class='to-animate'></div>
<pre class='output'></pre>
Cross Browser Version:
Here is a cross browser version with support for older browsers using methods exposed by the Prefix free library. This was tested in IE10+, Edge, Chrome v50 (dev-m), Firefox v43, Opera v35. Testing for prefixed version was done in Safari 5.1.7 on Win 10.
这篇关于动态创建和应用CSS3动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
