React animate element when property changes?
<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>