const animate_boxes = () => { inner_ref.current.style.transform = "scale(0)"; setTimeout(() => { if (inner_ref && inner_ref.current) { inner_ref.current.style.transform = "scale(1)"; } }, 200); }; useEffect(() => { animate_boxes(); }, [trigger])Actualmente, así es como lo hago.
¿Es esta la forma estándar/buena práctica? Si no, ¿cómo puedo volver a escribir el código anterior para simplificar?
Hay una excelente biblioteca de animación basada en ganchos llamada react-spring, puede usarla sola o junto con una biblioteca de gestos para crear buenas animaciones basadas en la física que se vean naturales. Sin embargo, tiene una pequeña curva de aprendizaje, aquí está el sitio web de la biblioteca.
Otra forma de animar es utilizando el atributo de transición CSS con estado de reacción y estilos en línea:
https://codesandbox.io/s/react-playground-forked-3t3p6?file=/Hello.js
import React, { useEffect, useState } from "react"; const blueSquare = { width: "25px", height: "25px", backgroundColor: "blue", transition: "opacity 0.5s, transform 3s", margin: 20 }; const Hello = () => { const [opacity, setOpacity] = useState(1); const [transform, setTransform] = useState("translate(0,0) scale(1)"); useEffect(() => { setTransform("translate(100px, 150px) scale(8)"); setTimeout(() => { setTransform("translate(300px, 150px) scale(8)"); }, 3000); }, []); return ( <div> <button onClick={() => setOpacity((prevState) => (prevState === 1 ? 0 : 1))} > Animate Opacity </button> <div style={{ ...blueSquare, transform, opacity }} /> </div> ); }; export default Hello;Pero como mencionó Brandon, si quieres hacer animaciones complejas, lo más probable es que sea más fácil buscar en React Spring.