如何在Dart中创建CSS关键帧规则 [英] How to create CSS keyframe rule in Dart

问题描述

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

I need to create @keyframe rules dynamically in Dart and add them to document stylesheet. Here is an example in JS of what I'm trying to do:

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

它提出两个问题：

1. 如何在Dart中创建@keyframe规则？在API文档中有一个CSSKeyframesRule，但最新的Dart编辑器说没有这样的类型，Dartium在我尝试使用它时抛出异常（是否已被弃用？）。我想它不只是像JS中的字符串，因为DART应该照顾供应商前缀？

1. How do i create @keyframe rule in Dart? There is a CSSKeyframesRule in API docs, but latest Dart editor says there is no such type and Dartium throws an exception when i try to use it (was it deprecated?). I suppose it's not just a string like in JS, as Dart should take care of vendor prefixes?

如果我创建一个规则，样式表。 StyleSheet类似乎没有任何方法像insertRule。我当然可以只是克利特风格节点和设置其innerHTML，但我不想为每个关键帧规则创建单独的节点。

If I create a rule, how can I insert it into stylesheet. StyleSheet class doesn't seem to have any method like insertRule. I could of course just crete style node and set its innerHTML, but I don't feel like creating separate node for every keyframe rule.

提前感谢。

推荐答案

以下代码似乎有效。

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

这篇关于如何在Dart中创建CSS关键帧规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！