javascript - 动态管理 webkit 动画

Question

我正在寻找一种无需部署静态 CSS 声明即可管理 webkit 动画的好方法。简而言之，仅使用 Javascript 添加关键帧部分、删除它们、更改它们等。我想我可以问而不是重新发明轮子。

是否有一个简单的 javascript 库可以做这样的事情(不是 jQuery 或类似的东西，只是一小段函数)？

必须有一种方法来做这样的事情(伪代码):

function setupAnim(aName) {
 /* becomes: @-webkit-keyframes "aName" */
 var mRule = jsAddCSSRule(aName);
 if (mRule) {
   /* inject CSS properties here */
   mRule.innerHTML = "from {...} to {...}";
 }
}

function removeAnim(aName) {
  var mRule = jsFindCSSRule(aName);
  if (mRule) {
    removeCSSRule(mRule);
  }
}

欢迎任何帮助!

Answer 1

我找到了 https://github.com/krazyjakee/keyframes.js它允许您创建和覆盖 CSS 动画。然而，它(目前)破坏了一个单一的 <style>元素，如果您正在创建大量动画规则，这可能效率低下，因为浏览器必须重新解析所有这些规则。

将来，CSSOM 的实现提案可能会让我们进行更细粒度的更改。 https://github.com/NV/CSSOM

在浏览器控制台中四处寻找，我确实发现浏览器公开了操纵现有 CSS 规则的方法，但我并没有成功。