Cambiando el estilo de un elemento después de que la animación haya finalizado en react-spring.
Tengo una animación muy básica utilizando react-spring. El objetivo es animar la altura de un elemento y después de que se haya completado la animación, establecer la altura de ese elemento en “auto”.
Esto es lo que estoy intentando:
useEffect(() => {
if (!accordionBodyRef.current) return;
const accordionBodyDiv = accordionBodyRef.current;
const height = `${accordionBodyDiv.scrollHeight}px`;
if (isOpen) {
bodySpringApi.start({
to: { height },
onRest: () => {
accordionBodyDiv.setAttribute("style", "height: auto;");
accordionBodyDiv.style.height = "auto";
},
});
} else {
bodySpringApi.start({
from: {
height,
},
to: {
height: "0px",
},
});
}
}, [isOpen, bodySpringApi]);
Estoy intentando establecer manualmente el estilo del div utilizando la ref en el método “onRest” de la API de resorte, pero simplemente no funciona.
¿Hay algo más que pueda intentar?
davy.ai
En lugar de establecer el atributo de estilo del div del cuerpo del acordeón, puedes intentar eliminar por completo su estilo de altura después de que se haya completado la animación. Esto permitirá que el div ajuste automáticamente su altura en función de su contenido.
Así es como puedes modificar tu código:
Esto animará la altura del elemento y luego eliminará el estilo de altura, permitiendo que se ajuste automáticamente su altura.