reactjs Framer Motion，我们能不能只在进入时错开项目，但同时退出它们？

cwxwcias 于 2022-12-03 发布在 React

关注(0)|答案(2)|浏览(116)

我们正在使用Framer Motion来交错动画，代码如下。问题是，我们只想交错项目，而不是交错项目。有没有办法指定特定于initial和exit的交错行为，而不是我们现在用来定义交错的顶级transition属性？
我 * 认为 * 我们可以通过指定“变量”来实现这一点，但在不添加额外代码和复杂性的情况下，是否有可能？

<AnimatePresence exitBeforeEnter>
  {items.map((item, i) => (
     <motion.div
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
       transition={{ duration: 1, delay: i * 1 }}>
       {item}
     </motion.div>
   ))}
</AnimatePresence>

reactjs

来源：https://stackoverflow.com/questions/73395417/framer-motion-can-we-stagger-items-only-on-enter-but-simultaneously-exit-them

2条答案

按热度按时间

thtygnil1#

可以为exit属性指定不同的过渡：

<AnimatePresence exitBeforeEnter>
  {items.map((item, i) => (
     <motion.div
       key={item.id} // don't forget the key!!!
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0, transition: { duration: 0.5 } }}
       transition={{ duration: 1, delay: i * 1 }}>
       {item}
     </motion.div>
   ))}
</AnimatePresence>

其他动画将继续使用transition属性的默认过渡。
此外，不要忘记为每个元素添加唯一的key，否则退出动画将不起作用。

赞(0）回复(0）举报 2022-12-03

zpjtge222#

exitBeforeEnter在v7.2中已不支持模式=“wait”

<AnimatePresence mode="wait">
  {items.map((item, i) => (
     <motion.div
       key={item.id}
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0, transition: { duration: 0.5 } }}
       transition={{ duration: 1, delay: i * 1 }}>
       {item}
     </motion.div>
   ))}
</AnimatePresence>

赞(0）回复(0）举报 2022-12-03

我来回答

reactjs Framer Motion，我们能不能只在进入时错开项目，但同时退出它们？

2条答案

相关问题

热门标签

最新问答