React Animation: DOM Enter Exit Popover

fiddle.css

html *, body * {
    margin: 0;
    padding: 0;
    font-family: Verdana, arial;
}
header {
    background-color: #dcdcdc;
    box-shadow: 0 1px 4px #666;
    height: 40px;
    line-height: 40px;
}
header h1 {
    margin: 0;
    padding: 0 0 0 50px;
    font-size: 16px;
    display: inline;
}
header > nav {
    display: inline-block;
    float: right;
    margin: 0 80px 0 0;
}
header > nav ul {
    list-style-type: none;
    padding: 0;
}
header > nav li {
    display: inline-block;
    position: relative;
}
header > nav li > label {
    display: block;
    color: #44e;
    cursor: pointer;
    padding: 0 10px;
    /* prevent text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
header > nav li > label:hover {
    background-color: #eee;
}
main {
    padding: 50px;
}
.popover-component {
    position: absolute;
    top: 40px;
    left: 50%;
    margin-left: -80px;
    font-size: 12px;
    width: 160px;
    background-color: white;
    border-radius: 8px;
    border: 1px solid gray;
    box-shadow: 1px 2px 4px gray;
    line-height: 12px;
    padding: 10px;
}
.popover-component:before, .popover-component::before {
    content: '';
    width: 15px;
    height: 15px;
    position: absolute;
    transform: rotateZ(-45deg);
    top: -9px;
    left: 50%;
    margin-left: -15px;
    
    background-color: white;
    border-style: solid;
    border-width: 1px 1px 0 0;
    border-color: gray;
}
.popover-component ul {
    list-style: square inside;
    padding: 5px 10px;
}
.popover-component li {
    display: list-item;
    white-space: nowrap;
}
.popover-component strong {
    white-space: nowrap;
}

/* ReactCSSTransitionGroup Animation styles*/
.popoveranim-enter {
    opacity: 0.01;
    transform: translateY(10px);
}

.popoveranim-enter.popoveranim-enter-active {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity .3s ease, transform .3s ease;
}

.popoveranim-leave {
    opacity: 1;
}

.popoveranim-leave.popoveranim-leave-active {
    opacity: 0.01;
    transition: opacity .3s ease;
}

fiddle.html

<!-- Required for using JSX in JsFiddle -->
<script src="//facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<!-- 
  sometimes gist / fiddle external resources specified in the manifest 
  are loaded out of order, so we put the react dependencies in order here 
-->
<script src="//fb.me/react-with-addons-0.14.3.js"></script>
<script src="//fb.me/react-dom-0.14.3.js"></script>

<div id="app"></div>

fiddle.js

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
 
var Popover = React.createClass({
  render: function () {
    return (
      <div className="popover-component">
        {this.props.children}
      </div>
      );
    }
});

var App = React.createClass({
  getInitialState: function() { return {}; },
  toggleMenu: function (id) {
    this.setState({'activeMenu': this.state.activeMenu === id ? null : id});
  },
  render: function () {
    return (
      <div className="application">
        <header>
          <h1>My Rad App</h1>
          <nav>
          <ul>
            <li onClick={this.toggleMenu.bind(this, 1)}>
              <label>Menu 1</label>
              <ReactCSSTransitionGroup 
               transitionName="popoveranim" 
               transitionEnterTimeout={350} 
               transitionLeaveTimeout={350}>
              {this.state.activeMenu === 1 ? 
                <Popover key={1}>
                 <strong>Menu 1 Content</strong><br/>
                 <a href="http://www.google.com">Goto Google</a>
                </Popover>
                : []
              }
              </ReactCSSTransitionGroup>
            </li>
            <li onClick={this.toggleMenu.bind(this, 2)}>
              <label>Menu 2</label>
              <ReactCSSTransitionGroup 
               transitionName="popoveranim"
               transitionEnterTimeout={350} 
               transitionLeaveTimeout={350}>
              {this.state.activeMenu === 2 ? 
                <Popover key={2}>
                	<strong>Menu 2 Content</strong>
                    <nav>
                      <ul>
                        <li>Menu 2 item</li>
                        <li>another menu 2 item</li>
                        </ul>
                    </nav>
                </Popover>
                : []
              }
              </ReactCSSTransitionGroup>
            </li>
          </ul>
          </nav>
        </header>
        <main>
          Lorem Ipsum
        </main>
      </div>
    );
  }
});

ReactDOM.render(<App />, document.getElementById('app'));

fiddle.manifest

name: ReactJS Animation popover menu
description: React state DOM Enter Exit Popover example
authors:
  - Adam Horton
resources:
  - //cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js
  - //cdnjs.cloudflare.com/ajax/libs/classnames/2.1.3/index.min.js
normalize_css: no
wrap: h
panel_js: 2
panel_css: 0