如何在 Dart 中创建 CSS 关键帧规则答案

【问题标题】：How to create CSS keyframe rule in Dart如何在 Dart 中创建 CSS 关键帧规则
【发布时间】：2012-12-20 09:20:11
【问题描述】：

我需要在 Dart 中动态创建 @keyframe 规则并将它们添加到文档样式表中。这是我正在尝试做的 JS 示例：

var styleSheet = document.styleSheets[0];
var rule = '@-webkit-keyframes { ... }';
styleSheet.insertRule(rule, 0);

它提出了两个问题：

如何在 Dart 中创建 @keyframe 规则？ API 文档中有一个 CSSKeyframesRule，但最新的 Dart 编辑器说没有这种类型，当我尝试使用它时，Dartium 会抛出异常（它是否已弃用？）。我想它不只是像 JS 中那样的字符串，因为 Dart 应该处理供应商前缀？
如果我创建一个规则，如何将它插入到样式表中。 StyleSheet 类似乎没有像 insertRule 这样的方法。我当然可以只创建 crete 样式节点并设置其 innerHTML，但我不想为每个关键帧规则创建单独的节点。

提前致谢。

【问题讨论】：

标签： dart

【解决方案1】：

下面的代码似乎可以工作。

void main() {
  final styleSheet = document.styleSheets[0] as CssStyleSheet;
  final rule = '@-webkit-keyframes mymove { from {top:0px;} to {top:200px;} }';
  styleSheet.insertRule(rule, 0);
}

【讨论】：

嗨，Armen，如果该解决方案适合您，您可能需要将其标记为绿色 :)
是的，谢谢 Alexandre 的快速回复。我终于有机会用我的代码尝试它，它按预期工作。我还认为我可以通过从document.styleSheets 读取它来获得对CssKeyframesRule 的引用，但我无法以编程方式创建它们。