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