title: ReactJS - Prevent initial animation of modal with react hooks
body: <p>I built simple Modal component which will slide from bottom when opened. Animations are working fine when Modal trigger button clicked and backdrop clicked. But i am seeing slide-down animation at initial render of page. How can i prevent initial animation ?? I am specifically looking how to solve with react hooks.</p>
  
  <p>Modal.js</p>
  
  <pre><code>import React, { useRef, useEffect } from 'react';
  import { createPortal } from 'react-dom';
  
  import './Modal.css';
  
  const Modal = ({ isOpen, onClose, children }) =&gt; {
    const modalEl = useRef(null);
    const handleCoverClick = (e) =&gt; {
      if (e.target.hasAttribute('modal')) {
        onClose();
      }
    }
  
    useEffect(() =&gt; {
      const handleAnimationEnd = (event) =&gt; {
        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 () =&gt; modalEl.current.removeEventListener('animationend', handleAnimationEnd);
    }, [isOpen]);
  
    return createPortal(
      &lt;&gt;
        &lt;div className={`ModalCover ${isOpen ? 'show' : 'hide'}`} onClick={handleCoverClick} modal="true"&gt;&lt;/div&gt;
        &lt;div className={`ModalContainer ${isOpen ? 'slide-up' : 'slide-down'}`} ref={modalEl}&gt;
          {children}
        &lt;/div&gt;
      &lt;/&gt;,
    document.body);
  };
  
  export default Modal;
  </code></pre>
  
  <p>Modal.css</p>
  
  <pre><code>.show {
      display: block;
  }
  
  .hide {
      display: none;
  }
  
  .slide-up {
      transform: translateY(0%);
      animation: slide-up 0.5s forwards;
  }
  
  .slide-down {
      transform: translateY(100%);
      animation: slide-down 0.5s forwards;
  }
  
  @keyframes slide-up {
      0% { transform: translateY(100%); }
      100% { transform: translateY(0%); }
  }
  
  @keyframes slide-down {
      0% { transform: translateY(0%); }
      100% { transform: translateY(100%); }
  }
  
  .ModalCover {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.15);
  }
  
  .ModalContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 400px;
    margin-top: calc(100vh - 400px);
    z-index: 20;
  }
  </code></pre>
  
  <p>demo (codesandbox) : <a href="https://codesandbox.io/s/l7x5p4k82m" rel="nofollow noreferrer">https://codesandbox.io/s/l7x5p4k82m</a></p>
  
  <p>Thanks!</p>