Framer Motion 退出和 AnimatePresence 在 Nextjs 中不起作用？

Question

我的exit道具或AnimatePresence不起作用。

我的變種：

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,
      },
    },
  };

我的代碼：

<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和animate工作正常，但是當我改變路線時退出 animation 不會觸發，我在這里做錯了嗎？

Answer 1

您嘗試制作動畫的元素需要具有唯一的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>