title: React dynamically adding classes for animation reverse
body: <p>Full code:<br>
  <a href="https://codesandbox.io/s/j4r7yoollw" rel="nofollow noreferrer">https://codesandbox.io/s/j4r7yoollw</a><br>
  I animate the modal on button click. But I want to be able to reverse the animation in <code>components/Modal/index.css</code> when I close it. I implemented <code>setTimeout</code> to give the modal time to fade out but it doesn't work. How do I do that so it does work?</p>
  
  <p>Modal/index.js:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import React from 'react';
  import Question from './Question';
  import Loading from './Loading';
  import Success from './Success';
  import './index.css';
  
  class Modal extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        loading: false,
        success: false,
        reverse: false,
      };
    }
    removeUser = () =&gt; {
      this.setState({ loading: true });
      // simulate async loading action
      setTimeout(
        () =&gt;
          this.setState({
            loading: false,
            success: true,
          }),
        2000,
      );
      //simulate promise (function above then this below)
      setTimeout(() =&gt; this.props.removeUser(this.props.data), 2001);
    };
    closeModal = () =&gt; {
      this.setState({ reverse: true });
      setTimeout(() =&gt; {
        this.props.closeModal();
        this.setState({
          reverse: false,
          success: false,
        });
      }, 3000);
    };
    render() {
      const { id, name } = this.props.data;
      const { loading, success } = this.state;
      // The gray background
      const backdropStyle = {
        position: 'fixed',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        backgroundColor: 'rgba(0,0,0,0.3)',
        padding: 50,
      };
  
      // The modal "window"
      const modalStyle = {
        backgroundColor: '#fff',
        textAlign: 'center',
        borderRadius: 3,
        maxWidth: 360,
        minHeight: 130,
        margin: '0 auto',
      };
  
      if (this.props.displayModal) {
        return (
          &lt;div className={'backdrop ' + (this.state.reverse ? 'reverse' : '')} style={backdropStyle}&gt;
            &lt;div className={'modal ' + (this.state.reverse ? 'reverse' : '')} style={modalStyle}&gt;
              {!loading &amp;&amp;
                !success &amp;&amp; (
                  &lt;Question
                    id={id}
                    name={name}
                    removeUser={this.removeUser}
                    closeModal={this.closeModal}
                  /&gt;
                )}
              {loading &amp;&amp; !success &amp;&amp; &lt;Loading /&gt;}
              {!loading &amp;&amp; success &amp;&amp; &lt;Success closeModal={this.closeModal} /&gt;}
            &lt;/div&gt;
          &lt;/div&gt;
        );
      }
      return null;
    }
  }
  
  export default Modal;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Modal/index.css:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>@keyframes modalFade {
    from {
      transform: translateY(-50%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  .modal {
    animation-name: modalFade;
    animation-duration: 0.3s;
  }
  
  @keyframes backdropFade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  .backdrop {
    animation-name: backdropFade;
    animation-duration: 0.3s;
  }
  
  .reverse {
    animation-direction: reverse;
  }</code></pre>
  </div>
  </div>
  </p>