Framer Motion，我们可以只在进入时交错项目，但同时退出它们吗？

Question

我们使用 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>

Answer 1

在 v7.2 中已弃用 mode="wait" 的 exitBeforeEnter

<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>

Answer 2

您可以为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 ，否则您的退出动画将不起作用。