title: Using React Modal with hooks: Trying to animate in mobile slide up and down. Slide up works wonderfully, but slide down style doesn't get applied
body: <p>This animation portion works really well on slideUp. But the slideDown animation (close) doesn't get triggered. There is an <code>x</code> on the modal that closes it.
  Is it because of the hook? This is the second time i'm using hook and first time to create a custom hook so was pretty stoked when it actually worked! But I'm stuck on the close animation part.</p>
  
  <p>I tried using transition animation, but that didn't work even for slide up, so decided to move to keyframes. </p>
  
  <p>Any help is appreciated. Thanks!</p>
  
  <p>Component:</p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import ReactModal from 'react-modal';
  import classNames from 'classnames';
  import styles from './styles.scss';
  
  const Modal = ({isVisible, hide, header, children}) =&gt; {
    const closeStyles = classNames('close-icon', styles.modalClose);
    const headerStyles = classNames('h3', styles.header);
    const slideAnimation = isVisible ? styles.slideUp : styles.slideDown;
    const className = classNames(styles.commonModalStyles, slideAnimation)
  
    return (
      &lt;ReactModal
        isOpen={isVisible}
        className={className}
        overlayClassName={styles.overlay}
        contentLabel={header}
      &gt;
        &lt;div className={styles.headerContainer}&gt;
          &lt;h3 className={headerStyles}&gt;{header}&lt;/h3&gt;
          &lt;div className={closeStyles} onClick={hide}/&gt;
        &lt;/div&gt;
        &lt;div className={styles.modal}&gt;{children}&lt;/div&gt;
      &lt;/ReactModal&gt;
    );
  };
  
  Modal.propTypes = {
    isVisible: PropTypes.bool,
    hide: PropTypes.func,
    header: PropsTypes.string,
    children: PropTypes.node,
  };
  
  Modal.defaultProps = {
    isVisible: false,
  };
  
  export default Modal;
  </code></pre>
  
  <p>Custom Hook:</p>
  
  <pre><code>import { useState } from 'react';
  
  const useToggle = () =&gt; {
    const [isVisible, setIsVisible] = useState(false);
  
    function toggle(event) {
      event.preventDefault();
      setIsVisible(!isVisible);
    }
  
    return {
      isVisible,
      toggle,
    }
  };
  
  export default useToggle;
  </code></pre>
  
  <p>Usage: </p>
  
  <pre><code>// import from file and render inside functional component.
  
    const {isVisible, toggle} = useToggle();
   &lt;ModalV2 isVisible={isVisible} hide={toggle} header="Custom Header"&gt; some content &lt;/Modal&gt;
  </code></pre>
  
  <p>My css code:</p>
  
  <pre><code>.overlay {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  
  .slideUp {
    animation: slideup .2s ease-in-out;
  }
  
  .slideDown {
    animation: slidedown .2s linear;
  }
  
  @keyframes slideup {
    0% {transform: translateY(100%);}
    100% {transform: translateY(0);}
  }
  
  @keyframes slidedown {
    0% {transform: translateY(0);}
    100% {transform: translateY(100%);}
  }
  
  .commonModalStyles {
    overflow: auto;
    position: fixed;
    width: 100%;
    height: 100%;
  }
  </code></pre>