动态创建和应用 CSS3 动画

Question

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

我目前正在关注示例here，但这很笨拙并且感觉不对。虽然它有效，但我宁愿有更好的解决方案（使用库或类似的东西）。

Answer 1

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

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

在下面的 sn-p 中，我首先插入了一个动画并将其应用于加载的元素。当动画开始时，元素触发animationstart 事件。在此事件侦听器中，我获得了正在动画的元素的 outerHTML 并将其打印以显示内联样式的存在方式，然后在动画结束时（使用 animationend 事件侦听器），我'我们删除了内联样式并在其后打印了outerHTML，以显示它不再有动画。

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

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>

---

此方法可用于动态创建和使用任何类型的动画。在 sn-p 下面创建并添加一个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 中完成的。