¿Framer Motion exit y AnimatePresence no están funcionando en Nextjs?
Mi prop exit
o AnimatePresence
no está funcionando.
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">
<pre><code> <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>
</code></pre>
<p></div>
initial
y animate
funcionan normalmente, pero la animación de salida no se activa cuando cambio de ruta, ¿estoy haciendo algo mal aquí?
davy.ai
Parece que tu código no tiene la propiedad
key
en el elementomotion.img
. La propiedadkey
es utilizada por React para determinar si un elemento es nuevo o ha sido eliminado, lo cual es importante para activar la animaciónexit
enAnimatePresence
. Intenta agregar una propiedadkey
única al elementomotion.img
basada en el ID del producto u otro identificador único, como por ejemplo:Esto debería permitir que
AnimatePresence
detecte correctamente cuando la imagen está saliendo y active la animación de salida.