Framer Motion + Next.js - 页面过渡 - layoutId 和初始道具冲突答案

【问题标题】：Framer Motion + Next.js - Page transition - layoutId and initial prop conflictFramer Motion + Next.js - 页面过渡 - layoutId 和初始道具冲突
【发布时间】：2022-08-19 00:59:13
【问题描述】：

在使用 layoutId 使用 Framer 运动和 Next.js 开发图像页面转换时，我遇到了一个问题。

我的基本目标：

主页显示带有 3 张图片的概览
单击图像 > 淡出其他图像 > 放大特定图像并转到具有全尺寸图像的页面。
单击返回链接 > 缩小大图像 > 淡入其他图像并稍有延迟。
GIF animation of current proejct

图像大小使用layoutId 可以很好地过渡，但是如果我在所有图像（也有一个layoutId）上使用initial、animate 和exit 定义不透明度过渡，它也会将不透明度值应用于@987654329 @ 过渡。正如你在 gif 中看到的，我的大图也变得透明了？？？？

有任何想法吗？非常感谢！

Github 上的代码：https://github.com/sefrijn/next-page-animate

部署在 Netlify 上：https://delicate-monstera-3b89b8.netlify.app/

图片组件代码：
```
import { motion } from \"framer-motion\";

export default function Image({ id }) {
  return (
    <motion.div
      layoutId={`wrapper_image_${id}`}
      transition={{ duration: 0.2 }}
      initial={{ opacity: 0.2 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0.2 }}
      className={\"relative w-full h-full\"}
    >
      <motion.img
        className={\"h-full w-full object-cover\"}
        src={`/mountain${id}.jpeg`}
      />
    </motion.div>
  );
}
```

你想什么时候运行不透明动画？
不明白你想做什么，但它看起来很棒。
@SomeoneSpecial 如果您查看 Netlify 部署，当您在大图像页面上单击“返回”时，我希望大图像保持完全可见，因此不透明度 1。只有小图像应该从透明淡化为完全可见。 ..希望这能让它更清楚。

标签： javascript reactjs next.js framer-motion

【解决方案1】：

我自己找到了答案：

工作 GIF 示例

我在 Image 组件中添加了一个道具 main。如果单击图像组件（在索引页面中）或以全尺寸活动，则此道具变为true。

通过使用此道具，未单击或全尺寸视图的图像组件使用变体进行动画处理。但是主 Image 组件忽略了变体动画，并使用 layoutId 自动在页面之间转换 Image 的位置。

当从单页返回到索引页时，我会随路由器发送一个参数，让索引页知道显示了哪个图像，以便为正确的图像组件设置 main 为 true。

完整代码：https://delicate-monstera-3b89b8.netlify.app/

希望这对任何人都有帮助！

import { motion } from "framer-motion";

export default function Image({ main = false, id }) {
  //  Conditionally enable or disable the motion props
  //  Main is true when this Image component is clicked or shown as full size
  const variants = {
    initial: !main ? { opacity: 0 } : null,
    animate: !main
      ? { opacity: 1, transition: { delay: 0.2 } }
      : { opacity: 1 },
    exit: !main ? { opacity: 0 } : null,
  };

  return (
    <motion.div
      layoutId={`wrapper_image_${id}`}
      variants={variants}
      initial="initial"
      animate="animate"
      exit="exit"
      transition={{ duration: 0.2 }}
      className={"relative w-full h-full"}
    >
      <img
        className={"shadow-lg h-full w-full object-cover"}
        src={`/mountain${id}.jpeg`}
      />
    </motion.div>
  );
}

【讨论】：