如何使用Framer Motion <AnimatePresence>和React Portal？

问题描述

情况

我使用 React Portals 构建了一个React Modal 组件（请参阅上面的文档）。在单击关闭按钮时卸载组件之前，我想使用 AnimatePresence 在Framer Motion中运行exit动画。不幸的是，我无法使其正常工作，需要帮​​助。

链接

• React Portals Docs
• Framer Motion AnimatePresence Docs
• React Modal File

我尝试过的

我将exit={{ opacity: 0 }}添加到了<RenderModal/>的孩子中。使用initial和animate进入的动画按预期工作。

1. 将<AnimatePresence>包装在模态根元素上

<div id="root"></div>
<AnimatePresence>
  <div id="modal-root"></div>
</AnimatePresence>

1. 包装为模态根的子代

错误：目标容器需要DOM元素

<div id="modal-root">
  <AnimatePresence></AnimatePresence>
</div>

1. 环绕组件元素

const Modal = ({
    title,footer,children,}) => {
   <AnimatePresence>
    {isVisible
      && (
        <RenderModal
          title={title}
          footer={footer}
          hide={hide}
        >
          {children}
        </RenderModal>
      )}
    </AnimatePresence>
  };

1. 包装使用过的组件

return (
  <>
    <Button onClick={show}>Open Modal</Button>
    <AnimatePresence>
      <Modal {...args}></Modal>
    </AnimatePresence>
    <p>Lorem ipsum dolor sit amet...</p>
  </>
);

解决方法

您还记得为条件渲染的元素包括一个key道具吗？在您的代码段中看不到它。

来自the docs：

每个子动作组件必须具有唯一的关键道具，以便AnimatePresence可以跟踪它们在树中的存在。