Tengo este código en css:
.coin { height: var(--coin-size); width: var(--coin-size); ..(blablabla) } .coin::before { ..(blablabla) animation: spin 5s linear infinite; ..(blablabla) }Y este código en el JS:
<div className="col-sm" id="coinId"> <div className="coin" onClick={coinSpin}></div> </div> ¿Qué debo poner en la función coinSpin para que disminuya la animation: spin 5s linear infinite en 0.5 en cada clic?
No puedo entender cómo acceder a este atributo en el CSS..
Gracias :)
Puede usar el estilo en línea y activar ese estilo cuando el usuario hace clic, o tiene la opción de usar el paquete classNames.
Si está cambiando cosas simples en el CSS a través del estado, puede agregar una clase al elemento que desea modificar que contendrá las diferentes propiedades y valores. Así por ejemplo...
.coin { color: blue; } .coin.spin::before { animation: spin 5s linear infinite } La sintaxis .coin.spin se dirige a todos los elementos .coin que contienen la clase .spin . Entonces, al agregar y eliminar esa clase, está haciendo que su moneda... gire.
En su función onSpin , agregará la clase y luego usará setTimeout durante 5000 milisegundos y luego eliminará automáticamente la clase.