Блог

Ситуация

Я создал модальный компонент React, используя порталы React (см. Документы выше). Перед отключением компонента при нажатии кнопки закрытия я хочу запустить exit анимацию с движением фреймера, используя AnimatePresence. К сожалению, я не могу заставить это работать и нуждаюсь в помощи.

Ссылки

• Документы React Portals
• Документы Framer Motion AnimatePresence
• Модальный файл React

Что я пробовал

Я добавил exit={{ opacity: 0 }} дочерний элемент <RenderModal/> . Ввод анимации с использованием initial и animate работал так, как ожидалось.

1. Оберните <AnimatePresence> вокруг модального корневого элемента

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

2. Перенос как дочерний элемент модального корня

Ошибка: целевому контейнеру требуется элемент DOM

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

3. Оберните вокруг элемента component

 const Modal = ({
    title,
    footer,
    children,
  }) => {
   <AnimatePresence>
    {isVisible
      amp;amp; (
        <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>
  </>
);
  

Привет, я думаю, может быть поздно. но я решаю с помощью этого кода

 
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 amp;amp; children}
        </AnimatePresence>,
        document.body
    );

export default ModalWrapper;

  

Я вдохновил нижеприведенный пост

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

Вы не забыли включить key реквизит для условно отображаемого элемента? Я не вижу этого в ваших фрагментах кода.

Из документов:

У каждого дочернего компонента motion должен быть уникальный ключ prop, чтобы AnimatePresence мог отслеживать их присутствие в дереве.