Блог

Поэтому я пытаюсь сделать простой ролик для игры в кости и хочу добавить анимацию вращения, чтобы он выглядел круто. По какой-то причине анимация работает только при первом броске, а не после него (если я не обновлю). Вот что у меня есть:

Приложение.tsx

 export default function App() {  const [dice, setDice] = useStatelt;string[]gt;([]);   return (  lt;div className="container"gt;  lt;h1 className="title-text"gt;Dice Rollerlt;/h1gt;   lt;div className="roll-dice-button"gt;  lt;RollBtn setDice={setDice} /gt;  lt;/divgt;   lt;Dice dice={dice} /gt;  lt;/divgt;  ) }  

RollBtn.tsx

 type Props = {  setDice: (s: string[]) =gt; void }  export default function RollBtn({setDice}: Props) {  const roll = () =gt; {  let dice: string[] = []'   for(let i = 0; i lt; 2; i  ) {  dice.push(Math.round(Math.random() * 5   1));  }    setDice(dice);  }   return lt;button onClick={() =gt; roll()}gt;Roll Dicelt;/buttongt;; }  

Кости.tsx

 type Props = {  dice: string[]; }  export default function Dice({ dice }: Props) {  return (  lt;div className="dice-container"gt;  {dice.map((d, i) =gt; (  lt;div className="die" key={i}gt;{d}lt;/divgt;  ))}  lt;/divgt;  ) }  

стили.scss

 .dice-container {  display: grid;  grid-template-columns: repeat(2, 1fr);  grid-column-gap: 1em;  justify-items: center;  align-items: center;   .die {  width: 2em;  height: 2em;  background-color: white;  border-radius: 8px;  color: black;  font-weight: 900;  font-size: 2em;  line-height: 2em;  text-align: center;  animation: spin_dice .25s;  } }  

Как я уже говорил ранее, при первом броске он выполнит анимацию, но после этого он просто изменит числа в кубиках.

Таким образом, если анимация не является циклом, она будет выполнена только один раз при визуализации компонента. Поэтому вам нужно изменить класс div .die на»», а затем изменить его обратно на .умрите, когда вы нажмете на кнопку «бросок».

Для этого вы должны поместить RollBtn и кости только в один компонент.