Блог

Главная - Вопросы по программированию - Как динамически изменять значение анимации во встроенном стиле ReactJS

Как динамически изменять значение анимации во встроенном стиле ReactJS

#javascript #html #css #reactjs

#javascript #HTML #css #reactjs

Вопрос:

Я нашел много связанных вопросов, касающихся встроенного стиля ReactJS, но не подходящих для моего.

Мне нужно изменить скорость анимации (1,3,4,6,7 — это мои скорости анимации) в пользовательском интерфейсе в соответствии со значениями API (которые изменяются динамически)

Я попробовал следующий способ

 <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>

Я не уверен, как этого добиться. Пожалуйста, помогите мне.

Комментарии:

1. Каждый из них является недопустимым или некорректным синтаксисом строки Javascript, lol. Внимательно прочитайте это и проверьте примеры: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference /… и пересмотреть базовый синтаксис строки Javsacript

2. @Jayce444 разместите эту ссылку, я приму

Ответ №1:

Это работает для меня

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

Ответ №2:

Ваша основная проблема заключается в том, что строки стиля не являются допустимыми JavaScript. Могу ли я предложить ознакомиться с синтаксисом литералов шаблонов. Если вы измените это, я подозреваю, что это должно сработать. Итак, ваш код должен выглядеть примерно так,

 <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>

Затем вы можете заменить ${2} ссылкой на состояние, которое постоянно обновляется.