Eu preciso executar a animação do css toda vez que clicar o botão. Poderia usar uma classe e usar o toggle, mas isso seria complicado, porque teria que usar duas vezes(retirar e colocar). Como a execução é apenas uma vez, até pensei em usar transmission. Mas de novo não sei como fazer para executar o css novamente.
Eu usei styled-components, mas aceito outras soluções
const Area = styled.div`
background-color: lightgrey;
font-size: 40px;
height: 400px;
width: 400px;
display: flex;
justify-content: center;
align-items: flex-end;
`;
const Bola = styled.div`
height: 40px;
width: 40px;
background-color: red;
border-radius: 20px;
position: relative;
top: 0px;
animation : example 4s ease;
@keyframes example {
0% {top: 0px;}
50% {top: -200px;}
}
`;
function App() {
const handle = (event) => console.log("pular");
return (
<div>
<Area>
<Bola/>
</Area>
<button onClick={handle}> Pular </button>
</div>
);
}
x