无法将 css 动画属性添加到组件答案

【问题标题】：Unable to add css animation property to component无法将 css 动画属性添加到组件
【发布时间】：2021-01-09 21:35:59
【问题描述】：

我正在将一个函数传递给应该注入背景动画的材质 UI 组件。三元组工作正常，因为我能够注入基本的 CSS 样式，如 { backgroundColor: "#3b69f2" } 。任何帮助找出我在关键帧/动画代码上做错了什么都将不胜感激！

组件

<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" },
     "100%": { backgroundColor: "blue" }
   },
   "@-moz-keyframes bgcolorchange": {
     "99.9%": { backgroundColor: "blue" },
     "100%": { backgroundColor: "blue" }
   },
   "@-o-keyframes bgcolorchange": {
     "99.9%": { backgroundColor: "blue" },
     "100%": { backgroundColor: "blue" }
   },
   WebkitAnimation: "bgcolorchange 5s infinite",
   MozAnimation: "bgcolorchange 5s infinite",
   OAnimation: "bgcolorchange 5s infinite",
   animation: "bgcolorchange 5s infinite",
   } 
   :
   {};

【问题讨论】：

标签： javascript css reactjs css-animations

【解决方案1】：

当您指向动画名称时。尝试在关键帧名称之前使用 $ 符号，如下面的代码

WebkitAnimation: "$bgcolorchange 5s infinite",
MozAnimation: "$bgcolorchange 5s infinite",
OAnimation: "$bgcolorchange 5s infinite",
animation: "$bgcolorchange 5s infinite",

【讨论】：