Javascript ReactJS-使用react挂钩防止模态的初始动画

我构建了一个简单的模态组件，当它打开时会从底部滑动。当点击模式触发按钮和背景时，动画工作正常。但我在页面的初始渲染时看到了向下滑动的动画。如何防止初始动画？？我特别关注如何使用react钩子解决问题

Modal.js

import React, { useRef, useEffect } from 'react';
import { createPortal } from 'react-dom';

import './Modal.css';

const Modal = ({ isOpen, onClose, children }) => {
  const modalEl = useRef(null);
  const handleCoverClick = (e) => {
    if (e.target.hasAttribute('modal')) {
      onClose();
    }
  }

  useEffect(() => {
    const handleAnimationEnd = (event) => {
      if (!isOpen) {
        event.target.classList.remove('show');
        event.target.classList.add('hide');

      } else {
        event.target.classList.remove('hide');
        event.target.classList.add('show');
      }
    };
    modalEl.current.addEventListener('animationend', handleAnimationEnd);

    return () => modalEl.current.removeEventListener('animationend', handleAnimationEnd);
  }, [isOpen]);

  return createPortal(
    <>
      <div className={`ModalCover ${isOpen ? 'show' : 'hide'}`} onClick={handleCoverClick} modal="true"></div>
      <div className={`ModalContainer ${isOpen ? 'slide-up' : 'slide-down'}`} ref={modalEl}>
        {children}
      </div>
    </>,
  document.body);
};

export default Modal;

演示（代码沙盒）：

---

谢谢

一种更简单的方法是使用

类名来实现这一点，因为DOM不鼓励直接访问DOM
modalEl.current
ref是在初始渲染后指定的，它可用作安装组件的标志：

<div className={`
  ModalContainer
  ${isOpen ? 'slide-up' : 'slide-down'}
  ${!modalEl.current && 'hide'}
`} ref={modalEl}>



在
useffect
中的组件挂载上应用
hide
类可能会导致短暂显示模态动画。
阅读了您的示例-您确实错过了不使用react pose的机会，这将节省您编写所有类逻辑和动画以及依赖css类名的时间，只需创建一个姿势模态，并通过useState钩子对其进行更改。在运行动画时，只需在useEffect挂钩或handle动画函数中使用if语句，不要在第一次渲染后使用if语句的变量或声明布尔值来运行它。您的示例不起作用。您可以在codesandbox中进行测试。我添加了代码沙盒，这是我的错。你的例子很好。但在我的代码中，第二次出现setState时会立即显示动画。谢谢你的回答。
<div className={`
  ModalContainer
  ${isOpen ? 'slide-up' : 'slide-down'}
  ${!modalEl.current && 'hide'}
`} ref={modalEl}>