es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

La animación reinicia los estados de los componentes hijos.

15 Jul, 2023 Programación

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.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    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 con AnimatePresence y añadir una propiedad de exit a las variantes que define cómo se debe animar el componente al salir de la vista.

    Así es como puedes implementar AnimatePresence:

    import { AnimatePresence, motion } from "framer-motion";

const [visible, setVisible] = useState(true);

return (
  <animatepresence>
    {visible && (
      <motion.div animate="{visible" "one"="" :="" "two"}="" variants="{{" one:="" {="" transform:="" "translatex(0%)",="" opacity:="" 1="" },="" two:="" {="" transform:="" "translatex(100%)",="" opacity:="" 0="" }="" }}="" exit="{{" opacity:="" 0="" }}="">
        // hijos
      </motion.div>
    )}
  </animatepresence>
);

    Al utilizar AnimatePresence y añadir una propiedad de exit a las variantes, el componente de animación ya no se volverá a montar y se conservará el estado de los componentes hijos.

Comments are closed.