javascript - 如何在 ReactJS 的内联样式中动态更改动画值

Question

我发现了许多有关 ReactJS 内联样式的相关问题，但不适合我的。

我需要根据 API 值（动态变化）在 UI 中更改动画速度（1、3、4、6、7 是我的动画速度）

我尝试了以下方式

<img className="fan1" src={fan1} style={{animation: "spin "`${2}`"s linear infinite" }}></img>    
<img className="fan1" src={fan1} style={{animation: "spin ${2}s linear infinite" }}></img>
<img className="fan1" src={fan1} style={{animation: `spin {2}s linear infinite` }}></img>
<img className="fan1" src={fan1} style={{animation: {spin {2}s linear infinite} }}></img>

我不确定如何实现这一点。请帮帮我。

标签： javascripthtmlcssreactjs

Answer 1

这对我有用

<img className="fan1" 
      src={fan1}
      style={{ animation: `spin ${5}s linear infinite` }}
      alt="fan"
  ></img>