message: converted the menu to transition group
diff: @@ -3,14 +3,34 @@ import { findDOMNode } from "react-dom";
  import PropTypes from "prop-types";
  import ReactModal from "react-modal";
  import classNames from "classnames";
  +import { Transition } from "react-transition-group";
  import "./style.css";
  +const duration = 100;
  +
  +const transitionStyles = {
  + entering: {
  + opacity: 0,
  + transform: "scale(0, 0)"
  + },
  + entered: {
  + opacity: 1,
  + transform: "scale(1, 1)"
  + },
  + exiting: {
  + opacity: 0,
  + transform: "scale(0, 0)"
  + },
  + exited: {
  + opacity: 0,
  + transform: "scale(0, 0)"
  + }
  +};
  +
  class Menu extends React.Component {
  constructor(props) {
  super(props);
  - this.state = {
  - isClosing: true
  - };
  + this.state = {};
  this.handleClosing = this.handleClosing.bind(this);
  }
  static propTypes = {
  @@ -27,25 +47,20 @@ class Menu extends React.Component {
  padding: 5
  };
  componentWillReceiveProps(nextProps) {
  - if (this.props.isOpen && !nextProps.isOpen) {
  - this.setState({ isClosing: !this.state.isClosing });
  - }
  - if (this.state.isClosing && nextProps.isOpen) {
  - setTimeout(() => {this.setState({ isClosing: false });}, 0);
  - }
  if (nextProps.node) {
  const boundingRect = nextProps.node ? findDOMNode(nextProps.node).getBoundingClientRect() : undefined; // eslint-disable-line react/no-find-dom-node
  this.setState({ boundingRect });
  }
  }
  handleClosing() {
  - this.setState({ isClosing: true });
  this.props.requestClose();
  }
  render() {
  return (
  + <Transition in={this.props.isOpen} timeout={duration}>
  + {(status) => (
  <ReactModal
  - className={classNames("menu", "content", { "closed": this.state.isClosing })}
  + className={classNames("menu", "content")}
  isOpen={this.props.isOpen}
  ariaHideApp={false}
  shouldCloseOnOverlayClick={true}
  @@ -55,18 +70,20 @@ class Menu extends React.Component {
  overlay: {
  backgroundColor: "transparent"
  },
  - content: {
  + content: Object.assign({
  transformOrigin: `${this.props.width}px 0px 0px`,
  width: `${this.props.width}px`,
  top: `${this.state.boundingRect ? this.state.boundingRect.top - this.props.padding : "40"}px`,
  left: `${this.state.boundingRect ? this.state.boundingRect.left - this.props.width - this.props.padding : "40"}px`
  - }
  + }, transitionStyles[status])
  }}
  >
  <div onClick={this.props.onClick}>
  {this.props.children}
  </div>
  </ReactModal>
  + )}
  + </Transition>
  );
  }
  }
  