title: React animate element when property changes?
body: <p>How to fade in an element when a property changes ?  </p>
  
  <p>I'd like the element returned by the <code>statusMessage()</code> function to fade in each time the <code>this.props.statusMessage</code> changes.  </p>
  
  <p>Currently no animations are applied.  It doesn't appear as though any classnames are added either.</p>
  
  <pre><code>class SelectPlayer extends React.Component {
  
    constructor(props) {
      super(props);
      this.handleClick = this.handleClick.bind(this);
    }
  
    handleClick() {
      selectedId = this.props.selectedId;
      selectedPlayerName = this.props.selectedPlayerName;
      Store.dispatch(Actions.updateScore(selectedId, selectedPlayerName));
    }
  
    statusMessage() {
      return (
        &lt;ReactCSSTransitionGroup
          transitionName='message'
          transitionAppear={true}
          transitionAppearTimeout={2000}
          transitionEnterTimeout={500}
          transitionLeaveTimeout={500}&gt;
            &lt;div key="1"&gt;{this.props.statusMessage.text}&lt;/div&gt;
        &lt;/ReactCSSTransitionGroup&gt;
      )
    }
  
    render() {
      if (this.props.selectedPlayerName) {
        return (
          &lt;div className="details"&gt;
            &lt;div className="name"&gt;{this.props.selectedPlayerName}&lt;/div&gt;
            &lt;button className="inc" onClick={this.handleClick}&gt;
              Add 5 points
            &lt;/button&gt;
            { this.statusMessage() }
          &lt;/div&gt;
        );
      }
      else {
        return (
          &lt;div className="message"&gt;Click a player to select&lt;/div&gt;
        );
      }
    }
  };
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.message {
    line-height: 2.25rem;
    text-align: center;
  }
  
  .message-appear {
    opacity: 0.01;
  }
  
  .message-appear.message-appear-active{
    opacity: 1;
  }
  </code></pre>