La animación reinicia los estados de los componentes hijos.
Tengo un componente de animación framer motion (también he intentado con componentes Stitches) que anima hacia y desde la vista basado en una variable useState:
const [visible, setVisible] = useState(true);
<motion.div animate="{visible" "one"="" :="" "two"}="" variants="{{" one:="" {="" transform:="" "translatex(0%)",="" opacity:="" 1="" },="" two:="" {="" transform:="" "translatex(100%)",="" opacity:="" 0="" }="" }}="">
// children
</motion.div>
Los componentes hijos están envueltos en contextos y el problema es que sus estados se reinician cada vez que se activa la animación.
He intentado declarar el componente de animación fuera de su alcance actual. En su alcance actual, reinicia los estados de todo excepto el estado “currentUser” en mi contexto AuthProvider. Fuera del alcance, también reinicia “currentUser”. He decidido no incluir el código original por brevedad.
Aquí hay un mínimo reproducible: Aquí. Si escribes algo en el input y luego haces clic en el botón de alternancia, se pierde el contenido del input.
davy.ai
El problema de perder la entrada cuando se activa la animación se debe al hecho de que el componente de animación se vuelve a montar cada vez que se activa, lo que hace que los componentes hijos pierdan su estado.
Para solucionar esto, un enfoque posible es mover el componente de animación fuera de los componentes envueltos en contexto y, en su lugar, envolver todo el árbol de componentes dentro de un único proveedor de contexto. De esta manera, el estado se conserva incluso cuando se activa el componente de animación.
Alternativamente, puedes intentar usar el componente
AnimatePresence
de Framer Motion para evitar que el componente de animación se vuelva a montar. Este componente se utiliza para animar cambios de presencia, como añadir o quitar nodos DOM. Puedes envolver tu componente de animación conAnimatePresence
y añadir una propiedad deexit
a las variantes que define cómo se debe animar el componente al salir de la vista.Así es como puedes implementar
AnimatePresence
:Al utilizar
AnimatePresence
y añadir una propiedad deexit
a las variantes, el componente de animación ya no se volverá a montar y se conservará el estado de los componentes hijos.