javascript - 动态创建和应用CSS3动画

jQuery中的.animate()函数不允许对所有CSS3可设置动画的属性进行动画处理(例如background-color)。有没有一种很好的标准方法可以动态创建，应用和删除页面上的CSS3动画？

我目前正在跟踪here示例，但这很笨拙，感觉不对。当它起作用时，我宁愿有一个更好的解决方案(使用一个库或类似的东西)。

最佳答案

是的，我们可以动态创建，应用和删除CSS3动画到页面中的元素。

要动态创建动画，我们需要使用insertRule或addRule函数添加@keyframes规则并将其附加到样式表中。附加动画后，将其应用于元素非常简单，我们只需要通过内联样式将所需的属性值设置为animation属性即可。删除它很简单，我们只需要在需要删除该值时将其设置回null即可。

在下面的代码片段中，我首先插入了一个动画并将其应用于加载后的元素。动画开始时，该元素触发animationstart事件。在此事件侦听器中，我获取了正在动画的元素的outerHTML并进行了打印，以显示内联样式的显示方式，然后在动画结束时(使用animationend事件侦听器)，删除了内联样式并在其后打印outerHTML，以显示其不再具有动画。

没有其他更简单的方法来动态创建CSS3动画。所有可能的解决方案都将涉及使用基本@keyframes，insertRule或关键帧特定的addRule函数(用于将规则附加到现有关键帧)创建appendRule并将其附加到样式表。

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>

此方法可用于动态创建和使用任何类型的动画。下面的代码段创建并添加了background-color动画。

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>

跨浏览器版本:

Here是一个跨浏览器版本，它使用Prefix free库公开的方法支持较旧的浏览器。已在IE10 +，Edge，Chrome v50(dev-m)，Firefox v43，Opera v35中进行了测试。在Win 10上的Safari 5.1.7中测试了前缀版本。

关于javascript - 动态创建和应用CSS3动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35166454/