如何在数组变化时用framer-motion正确动画映射的元素组？

核心原因 #

问题源于React元素复用机制和Framer Motion动画触发逻辑：

• 用index作为元素key时，切换数组后前两个元素（1、2）的key仍为0和1，React会直接复用原有DOM节点，不会重新渲染，因此触发不了动画。
• 容器组件未在切换时重新触发动画状态，导致子元素的变体动画未被重新激活。

具体修复步骤 #

1. 替换元素key为唯一标识

将key={index}改为key={i}（你的items元素是唯一数字，直接用元素值即可），让React识别每个元素的唯一性，切换时重新创建/销毁元素以触发动画：

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

2. 让容器在切换时重新触发动画

给容器添加key={current}，当current变化时，容器组件会重新挂载，重新执行initial到animate的动画流程，带动所有子元素触发动画：

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

3. 优化动画变体（可选）

原容器hidden状态的opacity:1逻辑矛盾，调整为更合理的初始状态，让动画过渡更自然：

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

调整完成后，切换数组时所有子元素（包括重复的1、2）都会触发hidden到visible的动画，新增/移除元素的动画也能正常执行。

内容的提问来源于stack exchange，提问作者middleStackoverflower