Hola, soy nuevo en ReactJS, así que estoy importando algunos de mis trabajos a mi proyecto y convirtiéndolos en componentes. Tengo un lapso que actúa como un botón con animaciones de fotogramas clave, pero cuando cargo la página, se anima. Una solución que tengo es hacer una .class.animation y dar la clase .animation en el primer clic. El caso es que sé codificarlo en jquery pero no en reaccionar.
La idea es convertir esto en reaccionar:
$('.navTrigger').onClick(function () { $(this).addClass('animations'); });Ahora mismo tengo esto:
const [isActive, setActive] = useState("false"); const handleToggle = () => { setActive(!isActive); }; return ( <span onClick={handleToggle} className={`navTrigger ${isActive ? "" : "animations"} ${isActive ? "" : "active"}`}> <i></i> <i></i> <i></i> </span> );Tengo una función en la que alterno la clase activa para ejecutar animaciones hacia atrás y hacia adelante.
Lo que hace el código a continuación es en la carga web, el lapso comienza con la clase navTrigger. La primera vez que hace clic en él, se le dan animaciones y una clase activa. Y luego, si interactúas con él nuevamente, elimina la clase activa y deja las animaciones allí.
function MenuButton() { const [isActive, setActive] = useState(false); const [animating, setAnimating] = useState(false); const handleToggle = () => { setActive(!isActive); setAnimating(true); }; return ( <span onClick={handleToggle} className={`navTrigger ${animating ? "animations" : ""} ${isActive ? "active" : ""}`}> <i></i> <i></i> <i></i> </span> ); }