Cuando la moneda está en CABEZA y la lógica se ejecuta y determina que es CABEZA nuevamente en el próximo lanzamiento, la animación no se activará porque depende de un cambio de nombre de clase y luego de que CSS se encargue de la animación. Estamos usando estado para cambiar el nombre de clase. Pensé que establecer el estado en nulo o algo así funcionaría porque técnicamente el nombre de clase está cambiando, pero tal vez se ejecuta demasiado rápido para que el navegador lo note. El orden del código debe ser: Flip Logic, JSX ClassName que cambia, CSS para animación
const flipCoin = () => { setCoin(""); const random = Math.random(); if (random < 0.5) { console.log(random); setCoin("heads"); setHeadsCount(headsCount + 1); } else { console.log(random); setCoin("tails"); setTailsCount(tailsCount + 1); } }; <div className="coinContainer"> <div id="coin" className={`animate-${coin}`}> <div id="heads" className="heads"></div> <div id="tails" className="tails"></div> </div> </div> .animate-heads { animation: flipHeads 3s; animation-fill-mode: forwards; } @keyframes flipHeads { from { transform: rotateY(0deg); } to { transform: rotateY(1800deg); } } .tails { background-image: url(./assets/tails.jpg); transform: rotateY(-180deg); } .animate-tails { animation: flipTails 3s; animation-fill-mode: forwards; }Entonces, si alguien tiene una respuesta, sería increíble. Gracias por tu tiempo.
Supongo que su método flipCoin() se llama dentro de un controlador de eventos React. Los cambios de estado se "agrupan" dentro del controlador de eventos, lo que significa que un setState pondrá en cola un cambio de estado, pero no activará un procesamiento hasta que el controlador de eventos regrese, y solo tendrá en cuenta el último setState (consulteeste artículo ). .
Para asegurarse de que el controlador de eventos regrese antes de su segundo setState que establece cara o cruz, puede envolverlo en un setTimeout(...,0) :
setTimeout(() => { setCoin("heads") // or tails }, 0); También es posible que desee considerar el uso de setImmediate y/o su navegador polyfill (consulte esta biblioteca ), que básicamente garantiza que su devolución de llamada se ejecutará lo antes posible después de que se vacíe la cola de eventos (lea más aquí ).