Ant Design Modal Animation

App.tsx

import { Button, ConfigProvider, Modal } from "antd";
import React, { useEffect, useState } from "react";
import 'animate.css';
import clsx from "clsx";

// 动画持续时间
const ENTRY_DURATION = 800;
const EXIT_DURATION = 600;

const App = () => {
  const [open, setOpen] = useState(false);
  const slogan = "React + Ant Design + TypeScript + Vite";

  const [realClosed, setRealClosed] = useState(false);

  const realOpen = !realClosed;

  useEffect(() => {
    if (!open) {
      const timer = setTimeout(() => {
        setRealClosed(true);
      }, EXIT_DURATION);
      return () => clearTimeout(timer);
    } else {
      // eslint-disable-next-line react-hooks/set-state-in-effect
      setRealClosed(false);
    }
  }, [open]);

  return (
    <ConfigProvider
      theme={{
        components: {
          Modal: { motion: false, algorithm: true }
        }
      }}
    >
      <Button type="primary" onClick={() => setOpen(true)}>
        Open Modal
      </Button>
      <Modal
        onCancel={() => {
          setOpen(false);
        }}
        open={realOpen}
        centered
        classNames={{
          mask: clsx('animate__animated', !open && 'animate__fadeOut'),
        }}
        styles={{
          mask: {
            '--animate-duration': `${EXIT_DURATION * 2}ms`,
          }
        }}
        afterOpenChange={globalThis.console.log}
        modalRender={node => React.createElement(
          'div',
          {
            className: clsx(
              'animate__animated',
              open
                ? 'animate__fadeInDown'
                : 'animate__fadeOutDown'
            ),
            style: {
              '--animate-duration': open ? `${ENTRY_DURATION}ms` : `${EXIT_DURATION}ms`,
            }
          },
          node
        )}
      >
        <h3>{slogan}</h3>
      </Modal>
    </ConfigProvider>
  );
}

export default App;