如何在数组更改时使用 framer-motion 正确地为一组映射项设置动画？答案

【问题标题】：How to properly animate group of mapped items with framer-motion while array is changing?如何在数组更改时使用 framer-motion 正确地为一组映射项设置动画？
【发布时间】：2023-02-03 12:39:21
【问题描述】：

我有一个像这样的数组： base = [{title:'foo',items: [1,2]},{title:'bar',items:[1,2,3,4]}]，然后我用条件映射这个数组：

 <motion.div variants={container} initial="hidden" animate="visible" exit={'hidden'}>
    {base[current].items.map(i =>
     <motion.div key={index} variants={item} >
         <div{i}</div>
     </motion.div>)}
</motion.div>

我需要为所有孩子制作动画，但现在我只为那些孩子制作动画，这更符合...... 例如：（在这种情况下）base 中第一个数组中的两个孩子是可见的，如果我更改数组（例如通过使用按钮切换）孩子3 和4 会出现动画，并且也隐藏，但是孩子1和2没有动画变化，如何解决？

动画变体：

export const container = {
    hidden: { opacity: 1, scale: 0 },
    visible: {
        opacity: 1,
        scale: 1,
        transition: {
            delayChildren: 0.3,
            staggerChildren: 0.2
        }
    }
};

export const item = {
    hidden: { y: 20, opacity: 0 },
    visible: {
        y: 0,
        opacity: 1
    }
};

【问题讨论】：

标签： reactjs framer-motion

【解决方案1】：

要解决这个问题，我们必须用属性为initial={false} mode={"wait"}的AnimatePresence包装我们的motion.div，其中映射的项目将有不同的键：例如key={i.title}

【讨论】：