En mi proyecto Next.js, tengo una lista de lugares, cada lugar abre un modal con sus detalles al enviar la consulta del lugar a la URL ( Link href={`/?place=${place}`} ) y representar condicionalmente el modal en el componente de página ( <Modal place={router.query.place} isOpen={!!router.query.place} ). Intento animar la apertura y el cierre del modal usando Framer Motion, pero desafortunadamente parece que solo funciona cuando se abre el modal. Para cerrar el modal, el usuario hace clic fuera de él en una superposición envuelta con <Link href="/" scroll={false}> . Luego, el modal se cierra sin volver a cargar la página, ya que router.query.place es falso, pero la animación aún no se ejecuta. Traté de envolver _app.js con <AnimatePresence exitBeforeEnter> sin suerte. A continuación se muestra una grabación de pantalla y algunas piezas de código.

Componente de la tarjeta:

 const Card = ({ place }) => { return ( <LinkBox> <Box w="100%" minH="100px" borderRadius="md" shadow="lg" overflow="hidden" position="relative" bg="currentcolor"> </Box> <Link href={`/?place=${place}`} as={`/places/${place}`} scroll={false} passHref> <LinkOverlay> <Heading as="h3" fontSize="lg" fontWeight="bold" mt={2} mr={1}> {place} </Heading> </LinkOverlay> </Link> </LinkBox> ); };

Componente modal:

 const Modal = ({ isOpen, place }) => { return ( <> {isOpen && ( <Link href="/" scroll={false}> <Box position="fixed" left="0" top="0" width="100vw" height="100vh"/> </Link> )} {isOpen && ( <Box as={motion.div} initial="exit" animate="enter" exit="exit" variants={{ enter: { y: "0%", opacity: 1, transition: { duration: 0.5, ease: "easeInOut" } }, exit: { y: "50%", opacity: 0, transition: { duration: 0.5, ease: "easeInOut" } }, }}> </Box> )} </> ); };