如何解决无法将CSS动画属性添加到组件
我正在将一个函数传递给应该注入背景动画的材质UI组件。我能够注入诸如{ backgroundColor: "#3b69f2" }
之类的基本CSS样式,因此三进制工作正常。任何对我发现关键帧/动画代码做错了事的帮助将不胜感激!
组件
<TableRow style={{ ...styleRowHiglight,...styleActionable,...styleRowActionHighlight }}>
功能
const styleRowActionHighlight = getter('matter','records','highlightRow')
===recordConfig['meta']['id'] ?
{
"@keyframes bgcolorchange": {
"99.9%": { backgroundColor: "blue" },"100%": { backgroundColor: "blue" }
},"@-webkit-keyframes bgcolorchange": {
"99.9%": { backgroundColor: "blue" },"@-moz-keyframes bgcolorchange": {
"99.9%": { backgroundColor: "blue" },"@-o-keyframes bgcolorchange": {
"99.9%": { backgroundColor: "blue" },WebkitAnimation: "bgcolorchange 5s infinite",MozAnimation: "bgcolorchange 5s infinite",OAnimation: "bgcolorchange 5s infinite",animation: "bgcolorchange 5s infinite",}
:
{};
解决方法
当您指向动画名称时。尝试在关键帧名称前使用 $ 符号,如下面的代码
WebkitAnimation: "$bgcolorchange 5s infinite",MozAnimation: "$bgcolorchange 5s infinite",OAnimation: "$bgcolorchange 5s infinite",animation: "$bgcolorchange 5s infinite",
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。