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

【问题标题】：Framer Motion exit and AnimatePresence not working in Nextjs?Framer Motion 退出和 AnimatePresence 在 Nextjs 中不起作用？
【发布时间】：2022-01-06 04:07:31
【问题描述】：

我的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 工作正常，但是当我改变路线时不会触发退出动画，我在这里做错了吗？

【问题讨论】：

检查这个post，想同样的目的

标签： javascript reactjs animation next.js framer-motion

【解决方案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>

【讨论】：