Ich möchte in meiner Anwendung Animationen verwenden, aber dafür ist die @property-Funktion in SCSS erforderlich:
@property --border-angle { syntax: "<angle>"; inherits: true; initial-value: 0turn; }
Gibt es eine Möglichkeit, dies in einer Stilkomponente zu tun?
Der vollständige Code der Animation befindet sich unter: https://codepen.io/shshaw/pen/RwJwJJx
Oder wie kann man diese Funktion umschreiben, sodass sie nicht die Funktion property
verwenden muss?
正如我测试的那样,发布的代码似乎确实可以与
styled-components
一起使用,尽管浏览器似乎支持@property
仍然受到限制,例如它适用于 Chrome,但目前不适用于 Firefox,因此不会在其上播放渐变动画。我尝试创建所发布代码的替代版本,而不使用
@property
,它也可以在 Firefox 上运行。如果它有用,这里有一个演示: stackblitz (代码包含在答案末尾)。原始发布的代码已使用以下示例进行了测试:stackblitz (Firefox 目前不支持
@property
的渐变动画)。下面是没有
@property
的替代版本进行比较,它使用伪元素并添加了子div
来在styled-components
中重新创建动画。现场演示:stackblitz(也应该有效)对于火狐浏览器)。
顺便说一句,@property
是较新的标准 CSS。有关@property
的更多背景信息,请参见 MDN。 p>