Estoy intentando animar un texto sobre un botón como diálogo de confirmación.
Ingenuamente, onClickestablece un estado en el trueque, a su vez, renderiza un componente de texto basado en un condicional. Sin embargo, dado que el estado está bloqueado true, una vez que se hace clic en el botón y se reproduce la animación, los clics posteriores no vuelven a ejecutar la animación.
CodeSandbox: https://codesandbox.io/s/youthful-shape-gwe43
App.jsx
import React, { useState } from "react";
import "./styles.css";
import styled, { keyframes } from "styled-components";
export const animation = keyframes`
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
`;
export const Text = styled.span`
margin-bottom: 10px;
animation-name: ${animation};
animation-duration: 5s;
animation-iteration-count: 1;
`;
export default function App() {
const [sample, setSample] = useState(false);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
{sample ? <Text>Start editing to see some magic happen!</Text> : null}
<button onClick={() => setSample(true)}>Click me</button>
</div>
);
}
¿Cómo puedo volver a ejecutar la animación de un componente cada vez que se hace clic en un botón?
Reemplace su código con lo siguiente. Establezca la setTimeoutmisma duración que animation-durationsolo para sincronizar la animación
export default function App() {
const [sample, setSample] = useState(false);
const showSample = () => {
setSample(true);
setTimeout(() => {
setSample(false);
}, 5000);
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
{sample ? <Text>Start editing to see some magic happen!</Text> : null}
<button onClick={showSample}>Click me</button>
</div>
);
}
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras