title: Animate React Modal
body: <p>I have a Modal in my web app which I want to slide in when the user clicks "open" button. I am using <a href="http://reactcommunity.org/react-transition-group/css-transition" rel="noreferrer">react-transition-group</a> to achieve this. But I am unable to get the animation working. Not sure what's wrong here?</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { CSSTransition } from 'react-transition-group';
  import Modal from 'react-modal';
  
  import './styles.css';
  
  class Example extends React.Component {
    state = {
      isOpen: false,
    };
  
    toggleModal = () =&gt; {
      this.setState(prevState =&gt; ({
        isOpen: !prevState.isOpen,
      }));
    };
    render() {
      const modalStyles = {
        overlay: {
          backgroundColor: '#ffffff',
        },
      };
      return (
        &lt;div&gt;
          &lt;button onClick={this.toggleModal}&gt;
            Open Modal
          &lt;/button&gt;
          &lt;CSSTransition
            in={this.state.isOpen}
            timeout={300}
            classNames="dialog"
          &gt;
            &lt;Modal
              isOpen={this.state.isOpen}
              style={modalStyles}
            &gt;
              &lt;button onClick={this.toggleModal}&gt;
                Close Modal
              &lt;/button&gt;
              &lt;div&gt;Hello World&lt;/div&gt;
            &lt;/Modal&gt;
          &lt;/CSSTransition&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>CSS File:</p>
  
  <pre><code>.dialog-enter {
    left: -100%;
    transition: left 300ms linear;
  }
  .dialog-enter-active {
    left: 0;
  }
  .dialog-exit {
    left: 0;
    transition: left 300ms linear;
  }
  .dialog-exit-active {
    left: -100%;
  }
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/csstransition-component-z1y2r" rel="noreferrer">Here</a> is the working code.</p>