[英]Framer Motion exit and AnimatePresence not working in Nextjs?
My exit
prop or AnimatePresence
is not working.我的
exit
道具或AnimatePresence
不起作用。
My variant:我的变种:
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,
},
},
};
My code:我的代码:
<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
and animate
is working normally, but exit animation wont trigger when I change route, am I doing something wrong here? initial
和animate
工作正常,但是当我改变路线时退出 animation 不会触发,我在这里做错了吗?
The element you're trying to animate needs to have a unique key
prop.您尝试制作动画的元素需要具有唯一的
key
道具。
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.