javascript - 如何使用 Framer Motion和反应门户？

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 可以跟踪它们在树中的存在。