使用createPortal的Modal中AnimatePresence退出动画失效求助

针对你遇到的Modal入场动画正常、退出动画失效问题，核心原因通常是组件在退出动画完成前就被React卸载，以下是针对性的解决步骤：

1. 用AnimatePresence包裹Modal条件渲染逻辑 #

Framer Motion的AnimatePresence组件专门用于追踪组件的挂载/卸载状态，只有被它包裹的组件才能触发退出动画。确保你的Modal渲染逻辑符合以下结构：

import { AnimatePresence } from "framer-motion";

// 在useModal对应的渲染区域
<AnimatePresence>
  {isModalOpen && <Modal key="unique-modal-key" />}
</AnimatePresence>

2. 给Modal设置稳定的唯一key #

key必须在Modal的打开/关闭周期内保持稳定，不能使用动态生成的临时值（比如随机数）。如果是全局唯一的Modal，直接用固定字符串（如"global-modal"）即可；如果是多实例Modal，需基于每个Modal的唯一标识（如ID）设置key。

3. 确保Modal内部的motion组件配置了exit动画属性 #

你的motion组件必须显式声明exit状态的动画参数，否则无法触发退出动画：

const Modal = () => {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: 20 }} // 必须配置该属性
      transition={{ duration: 0.3 }}
    >
      {/* Modal内容 */}
    </motion.div>
  );
};

4. React 18并发模式适配 #

如果你开启了React 18的并发模式，需给AnimatePresence添加mode="wait"属性，确保动画完全结束后再卸载组件：

<AnimatePresence mode="wait">
  {isModalOpen && <Modal key="modal" />}
</AnimatePresence>

5. 避免卸载AnimatePresence的父组件 #

确保AnimatePresence所在的父组件在Modal关闭过程中不会被卸载，否则它无法持续追踪Modal的卸载状态以完成退出动画。

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