Question

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

是否有一个简单的javascript lib可以执行类似这样的操作（不是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规则的方法，但我没有取得很多成功。

动态管理webkit动画

1 个答案: