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

Question

We're staggering animations using Framer Motion with some code like below. The problem is, we only want to stagger items in, not out. Is there any way to specify staggering behavior specific to initial and exit , as opposed to the top level transition property we're using to define staggering now?

I think we could achieve this specifying "variants" but is it possible without adding that extra code and complexity?

<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

exitBeforeEnter has been deprecated for mode="wait" in v7.2

<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

You can specify a different transition for the exit prop:

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

Your other animations will continue to use the default transition from the transition prop.

Also, don't forget to add a unique key to each element , or your exit animations won't work.