React中Framer Motion模态框退出动画失效问题求助

1. 调整AnimatePresence的mode属性 #

默认mode="wait"，若父组件存在条件渲染或卸载逻辑，可能导致AnimatePresence无法追踪子元素的退出状态。显式设置mode="popLayout"，保证动画完成后再移除DOM节点：

<AnimatePresence mode="popLayout">
  {isOpen && <Modal key="modal" />}
</AnimatePresence>

2. 验证退出动画变体的正确性 #

确保motion组件的exit配置是有效的动画对象，不要遗漏过渡时长或写错属性：

const modalVariants = {
  enter: { opacity: 1, scale: 1 },
  exit: { opacity: 0, scale: 0.8, transition: { duration: 0.3 } }
};

<motion.div
  variants={modalVariants}
  initial="exit"
  animate="enter"
  exit="exit"
>
  {/* 模态框内容 */}
</motion.div>

3. 排查强制卸载逻辑 #

检查关闭模态框时，是否存在除setIsOpen(false)之外的卸载操作——比如父组件的条件渲染依赖多状态联动，或其他逻辑直接移除了模态框组件。

4. 确保背景层的动画配置正确 #

若背景层是独立的motion元素，必须给它添加exit动画，且和模态框一起被包裹在AnimatePresence内。注意每个motion元素需要独立的key：

<AnimatePresence>
  {isOpen && (
    <>
      <motion.div 
        key="backdrop" 
        exit={{ opacity: 0 }} 
        initial={{ opacity: 0 }} 
        animate={{ opacity: 1 }}
      />
      <motion.div key="modal" exit={/* 你的退出动画 */} />
    </>
  )}
</AnimatePresence>

或者将背景和模态框放入同一个motion.div容器中，统一配置动画。

5. 检查React.StrictMode的影响 #

开发环境下，React.StrictMode的双重渲染可能干扰Framer Motion的动画检测逻辑。可暂时关闭StrictMode测试是否恢复正常。

6. 升级Framer Motion版本 #

部分旧版本（如v4之前）存在AnimatePresence的兼容性bug，建议升级到最新稳定版：

npm install framer-motion@latest

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