成帧器运动 animation 不适用于通过 map() 呈现的元素

Question

我正在尝试制作这样的动画： https://drive.google.com/file/d/1WQCg7j49xd5XfuaYuC2YFQCUU-UXassp/view?usp=sharing

这是我的代码：

<motion.div layout className="grid grid-cols-2 md:grid-cols-3 gap-8 py-10">

  <motion.div
    layout
    style={cardOpen && { gridColumn: "1 / -1" }}
    className={`card group relative w-full h-72 bg-primary rounded-lg overflow-hidden ${cardOpen ? "flex gap-5 p-10 shadow-inner" : "cursor-pointer"}`}
    onClick={() => {
      if (cardOpen) return;
      setCardOpen(true);
    }}
  >
    
    <AnimatePresence mode="wait">
      {cardOpen && (
        <motion.div
          className="h-full absolute -bottom-32 -left-4 group-hover:brightness-30"
          animate={{ y: [-100, 0] }}
        >
          <motion.img
            className="h-full z-0"
            src="/img/highlighted_projects/bg/moladin.svg"
            alt=""
          />
        </motion.div>
      )}
      {cardOpen || (
        <motion.img
          transition={{ ease: "easeIn", duration: 0.1 }}
          initial={{ x: -500 }}
          animate={{ x: [-500, 0] }}
          exit={{ opacity: [1, 0] }}
          className="absolute top-0 left-0 rounded-lg duration-300 w-full h-full object-cover brightness-50 group-hover:scale-110 group-hover:brightness-100"
          src="/img/highlighted_projects/supra.jpeg"
          alt=""
        />
      )}
    </AnimatePresence>

    <motion.div className={`duration-300 text-white z-10 w-full ${cardOpen ? "" : "absolute bottom-3 left-3 group-hover:bottom-5"}`}>
      <motion.div layout="position">
        {cardOpen && <span className="montserrat font-light text-xs">Dec 2021 - Present</span>}
        <div className="flex justify-between">
          <h1 className="text-4xl font-bold">Moladin</h1>
          {cardOpen && <X className="cursor-pointer" onClick={() => setCardOpen(false)} />}
        </div>
        <div className="flex gap-2 text-xs">
          <span className="border rounded-full py-px px-2">Javascript</span>
          <span className="border rounded-full py-px px-2">React</span>
          <span className="border rounded-full py-px px-2">SCSS</span>
        </div>
      </motion.div>
      {cardOpen && (
        <motion.div className="mt-2" animate={{ opacity: [0, 1] }} transition={{ duration: 1, ease: "easeIn" }}>
          <p className="montserrat">Yes. I'm one of many moladians you saw out there. We make selling/buying cars easier, safer, and profitable! My responsibility is mainly on CRM side of Moladin. But I sometimes handle the B2C side as well.</p>
        </motion.div>
      )}
    </motion.div>
  </motion.div>

  <motion.div layout className="card w-full h-44 bg-blue-400">
    moladin
  </motion.div>
  <motion.div layout className="card w-full h-44 bg-blue-400">
    moladin
  </motion.div>
</motion.div>

它正在工作，但后来我用它制作了一个组件并为其提供数据。 现在它不起作用： https://drive.google.com/file/d/1XdqN-_BA5ABdNpQThI_KfF6D9UPlQKXO/view?usp=share_link

这是代码：

{featuredProjects.map(project => <FeaturedProject key={project.projectName} {...project} /> )}

我尝试了这个Framer motion new animation 并退出不使用映射但它似乎对我不起作用或者我无法理解它

我如何让它发挥作用？ 谢谢。

Answer 1

我碰巧通过使用AnimatedSharedLayout让它工作：

<AnimateSharedLayout>
  {featuredProjects.map(project => (
    <FeaturedProject key={project.id} {...project} />
  ))}
</AnimateSharedLayout>

但我注意到它已被弃用，并建议我改用layoutId 。

我尝试使用layoutId但它不起作用......

甚至删除layout本身：

至于现在我的问题kind of解决了，但我认为它还没有真正解决。 所以我会保持这个线程打开