title: How to slide OUT modal without using jQuery?
body: <p>Is there a way that I could slide out my modal which slides in?I've written a code that makes the modal slide in from left to right and  I cant figure out how to slide out the modal. Can anyone help me with this? When the user clicks on the x button, the modal should slide out from right to left.</p>
  
  <p>Thanks in advance!!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.headerContactModal {
      background-color: white;
      color: #1a66b1;
      margin-left: 15px;
      height:70px;
      width:100%;
      padding-top: 20px;
      font-weight: 700;
  }
  
  .headerContactModalMessage {
    padding-left: 20px;
    padding-right: 5px;
  }
  
  .headerContactModalExit{
    z-index: 999;
    float: right;
    display: inline;
    color: $dark_gray;
    position: absolute;
    top: 5px;
  }
  
  .headerContactModalPhone {
      font-size: 18px;
      padding-right: 10px;
  }
  
  .slidein {
    animation-duration: 700ms;
    animation-name: slidein;
    animation-iteration-count: 1;
    animation-direction: alternate;
  }
  
  @keyframes slidein {
    from {
      margin-left:100%;
    }
  
    to {
      margin-left:0%;
    }
  }
    </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import React, { PropTypes, Component } from 'react';
  import classNames from 'classnames';
  import Button from '../../../common_ui/leafs/Button';
  import GenericTextField from '../../components/GenericTextField';
  import Icon from '../../../common_ui/leafs/Icon';
  
  class HeaderContactModal extends Component {
  
    static propTypes = {
      phoneNumber: PropTypes.string,
      messageText: PropTypes.string
    }
  
    static defaultProps = {
      phoneNumber: '1-800-CALLUS',
      messageText: 'Call us:'
    }
  
    render() {
      return (
        &lt;div className="headerContactModal slidein"&gt;
          &lt;span className="headerContactModalMessage"&gt;{this.props.messageText}&lt;/span&gt;
          &lt;span className="headerContactModalPhone"&gt;{this.props.phoneNumber}&lt;/span&gt;
          &lt;span onClick={this.props.contractContactUs}&gt;&lt;Icon className="fa-close headerContactModalExit"/&gt;&lt;/span&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default HeaderContactModal;</code></pre>
  </div>
  </div>
  </p>