时间戳

首页 > 解决方案 > Framer 运动退出动画也在映射的反应 div 元素上播放

reactjs - Framer 运动退出动画也在映射的反应 div 元素上播放

问题描述

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

这是我的问题：我把这个 div 做成了一个 motion.div 并添加了一个退出动画。但是当我点击一个元素时，所有其他元素也会播放退出动画。我怎样才能防止这种情况发生？我只想要点击播放退出动画的 div，而不是其他 div。

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

代码的小例子：

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

标签： reactjsanimationframer-motion

解决方案

您是否将 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

推荐阅读