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

Question

情况

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

链接

• React 门户文档
• Framer Motion AnimatePresence 文档
• 反应模态文件

我试过的

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

1. 将<AnimatePresence>包裹在 modal-root 元素周围

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

2. 包装为 modal-root 的孩子

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

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

3. 环绕组件元素

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

4. 环绕使用过的组件

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

Answer 1

你好，我想可能会迟到。 但我用这段代码解决了

import { ReactNode } from "react";
import ReactDOM from "react-dom";
import { AnimatePresence } from "framer-motion";

interface ModalWrapperProps {
    children: ReactNode;
    isShowing: boolean;
}

const ModalWrapper = ({ children, isShowing }: ModalWrapperProps) =>
    ReactDOM.createPortal(
        <AnimatePresence exitBeforeEnter>
            {isShowing && children}
        </AnimatePresence>,
        document.body
    );

export default ModalWrapper;

我启发了下面的帖子

https://blog.logrocket.com/implementing-animated-toasts-in-react/

Answer 2

您是否记得为条件渲染元素包含一个key道具？ 我在你的代码片段中没有看到它。

从文档：

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