Mi accesorio de exit o AnimatePresence no funciona.
Mi variante:
const imgVariant = { initial: { opacity: 0, y: -100, }, animate: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 20, }, }, exit: { opacity: 0, y: 500, transition: { duration: 5, }, }, };Mi código:
<div className="h-screen bg-neutral-200 flex overflow-hidden"> <AnimatePresence exitBeforeEnter> <div className="w-full grid place-items-center"> <motion.img src={product.image} alt={product.name} className="h-[400px] object-cover z-10 cursor-pointer" variants={imgVariant} initial="initial" animate="animate" exit="exit" drag dragConstraints={{ top: 0, left: 0, right: 0, bottom: 0 }} /> </div> </AnimatePresence> </div> initial y animate funcionan normalmente, pero la animación de salida no se activa cuando cambio de ruta, ¿estoy haciendo algo mal aquí?
El elemento que está tratando de animar debe tener una key única.
<div className="h-screen bg-neutral-200 flex overflow-hidden"> <AnimatePresence exitBeforeEnter> <div className="w-full grid place-items-center"> <motion.img key={product.id} src={product.image} alt={product.name} className="h-[400px] object-cover z-10 cursor-pointer" variants={imgVariant} initial="initial" animate="animate" exit="exit" drag dragConstraints={{ top: 0, left: 0, right: 0, bottom: 0 }} /> </div> </AnimatePresence> </div>