Framer 运动出口 animation 也可以在映射的反应 div 元素上播放

Question

我是 Framer Motion 的新手，我无法解决这个问题。 我正在使用 React，并且我有一个 I.map() 通过的对象数组。 对于每个 object，它都会创建一个 div。

这是我的问题：我将这个 div 设为 motion.div，并在其中添加了 exit animation。 但是当我单击一个元素时，所有其他元素也会播放出口 animation。 我怎样才能防止这种情况发生？ 我只想要点击播放出口 animation 的 div，而不是其他 div。

顺便说一句：hover 动画可以单独工作。 例如 whileHover={{scale: 1.03}}

代码的小例子：

{marvelMovies.map((movie, index) => 
   <motion.div exit={{opacity: 0}} transition={transition} className="movie" key={index}>
  
   
   </motion.div>
)}

Answer 1

您是否将 div 包装在Animate Presence中

<AnimatePresence>
{marvelMovies.map((movie, index) => 
   <motion.div exit={{opacity: 0}} transition={transition} className="movie" key={index} />)}
</AnimatePresence>

我用一个工作示例制作了一个代码沙箱： https://codesandbox.io/s/framer-motion-multiple-item-animation-presence-sdmq2