问题

我有以下的ReactJS模态对话框，并且通过点击按钮来生成它，将isOpen设置为true。如何为它添加动画效果？

如需进一步的帮助，请提出具体的问题。

const isClickInsideRectangle = (e: MouseEvent, element: HTMLElement) => {
	if (!element) return;
	const r = element.getBoundingClientRect();

	let isInside =
		e.clientX > r.left &&
		e.clientX < r.right &&
		e.clientY > r.top &&
		e.clientY < r.bottom;

	return isInside;
};

export const Modal = ({ isOpen, children, onOutsideClick }: Props) => {
	const ref = useRef<HTMLDialogElement>(null);

	useEffect(() => {
		if (isOpen) {
			ref.current?.close();
			ref.current?.showModal();
			document.body.classList.add("modal-open"); // prevent bg scroll
		} else {
			ref.current?.close();
			document.body.classList.remove("modal-open");
		}
	}, [isOpen]);

	const handleOutsideClick = (e: any) => {
		let isHidden = e.target.hidden;
		if (!isHidden && !isClickInsideRectangle(e, ref.current!)) {
			onOutsideClick && onOutsideClick();
		}
	};
	return (
		<div className="mw-modal" onClick={handleOutsideClick}>
			<dialog className="mw-modal--dialog" ref={ref}>
				{children}
			</dialog>
		</div>
	);
};

答案1

得分: 1

您可以制作一些漂亮的 CSS 动画。这里有一个简单且不太复杂的示例：

将这些类添加到您的 CSS 文件中：
```css
.mw-modal--dialog {
  opacity: 0;
  transform: translateY(-10%);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.mw-modal--dialog.show {
  opacity: 1;
  transform: translateY(0);
}

然后，您需要一些 JavaScript 来在触发时添加和移除 CSS 类。将以下代码添加到您的 Modal 组件中：

export const Modal = ({ isOpen, children, onOutsideClick }: Props) => {
    const ref = useRef<HTMLDialogElement>(null);

    useEffect(() => {
        if (isOpen) {
            ref.current?.close();
            ref.current?.showModal();
            ref.current?.classList.add("show");     // 添加 show 类
            document.body.classList.add("modal-open");
        } else {
            ref.current?.classList.remove("show");     // 移除 show 类
            ref.current?.close();
            document.body.classList.remove("modal-open");
        }
    }, [isOpen]);

    const handleOutsideClick = (e: any) => {
        let isHidden = e.target.hidden;
        if (!isHidden && !isClickInsideRectangle(e, ref.current!)) {
            onOutsideClick && onOutsideClick();
        }
    };
    return (
        <div className="mw-modal" onClick={handleOutsideClick}>
            <dialog className="mw-modal--dialog" ref={ref}>
                {children}
            </dialog>
        </div>
    );
};

<details>
<summary>英文:</summary>

You can do some neat css animations. Here is something easy and not too complex:

Add these classes to your css file
```css
.mw-modal--dialog {
  opacity: 0;
  transform: translateY(-10%);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.mw-modal--dialog.show {
  opacity: 1;
  transform: translateY(0);
}

Then you'll need some JS to add and remove the css classes on trigger. Add this to your Modal component

export const Modal = ({ isOpen, children, onOutsideClick }: Props) => {
    const ref = useRef<HTMLDialogElement>(null);

    useEffect(() => {
        if (isOpen) {
            ref.current?.close();
            ref.current?.showModal();
            ref.current?.classList.add("show");     // Add show class
            document.body.classList.add("modal-open");
        } else {
            ref.current?.classList.remove("show");     // Remove show class
            ref.current?.close();
            document.body.classList.remove("modal-open");
        }
    }, [isOpen]);

    const handleOutsideClick = (e: any) => {
        let isHidden = e.target.hidden;
        if (!isHidden && !isClickInsideRectangle(e, ref.current!)) {
            onOutsideClick && onOutsideClick();
        }
    };
    return (
        <div className="mw-modal" onClick={handleOutsideClick}>
            <dialog className="mw-modal--dialog" ref={ref}>
                {children}
            </dialog>
        </div>
    );
};