时间戳

首页 > 解决方案 > 无法将 css 动画属性添加到组件

javascript - 无法将 css 动画属性添加到组件

问题描述

我正在将一个函数传递给应该注入背景动画的材质 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",
   } 
   :
   {};

标签： javascriptcssreactjscss-animations

解决方案

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

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

推荐阅读