我想在我的应用程序中使用动画,但它需要 SCSS 中的 @property 函数:
@property --border-angle { syntax: "<angle>"; inherits: true; initial-value: 0turn; }
有没有办法在样式组件中做到这一点?
动画的完整代码位于:https://codepen.io/shshaw/pen/RwJwJJx
或者如何重写这个函数,使其不必使用 property
函数?
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
正如我测试的那样,发布的代码似乎确实可以与
styled-components
一起使用,尽管浏览器似乎支持@property
仍然受到限制,例如它适用于 Chrome,但目前不适用于 Firefox,因此不会在其上播放渐变动画。我尝试创建所发布代码的替代版本,而不使用
@property
,它也可以在 Firefox 上运行。如果它有用,这里有一个演示: stackblitz (代码包含在答案末尾)。原始发布的代码已使用以下示例进行了测试:stackblitz (Firefox 目前不支持
@property
的渐变动画)。下面是没有
@property
的替代版本进行比较,它使用伪元素并添加了子div
来在styled-components
中重新创建动画。现场演示:stackblitz(也应该有效)对于火狐浏览器)。
顺便说一句,@property
是较新的标准 CSS。有关@property
的更多背景信息,请参见 MDN。 p>