AnimatePresence与motion.div在三元运算符中动画不生效问题求助

你遇到的问题核心是缺少key属性。AnimatePresence需要通过唯一key来识别子元素的新增和移除，才能正确触发对应的入场、退场动画。你用三元运算符切换两个motion.div时，没有给这两个元素加唯一标识，React会默认复用DOM节点，framer-motion感知不到元素发生了卸载/挂载，自然不会触发fade-in/fade-out效果。

修正后的代码如下：

<AnimatePresence exitBeforeEnter>
  {
    disclosure.visible ? (
      <motion.div
        key="yes"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0, transition: { delay: 1 } }}
        transition={{ duration: 2 }}
      >
        <div>YES</div>
      </motion.div>
    ) : (
      <motion.div
        key="no"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0, transition: { delay: 1 } }}
        transition={{ duration: 2 }}
      >
        <div>NO</div>
      </motion.div>
    )
  }
</AnimatePresence>

补充说明：你之前单独渲染YES时动画正常，是因为此时只有一个固定元素，不需要key做区分，framer-motion可以正常识别它的挂载卸载事件。另外你原代码里把duration直接写在initial/animate/exit的属性对象里是不规范的，动画时长等配置应该放在transition属性里，上面的代码也做了对应调整。

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