How to fade in an element when a property changes ?

I'd like the element returned by the statusMessage() function to fade in each time the this.props.statusMessage changes.

Currently no animations are applied. It doesn't appear as though any classnames are added either.

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 (

      <ReactCSSTransitionGroup

        transitionName='message'

        transitionAppear={true}

        transitionAppearTimeout={2000}

        transitionEnterTimeout={500}

        transitionLeaveTimeout={500}>

          <div key=1>{this.props.statusMessage.text}</div>

      </ReactCSSTransitionGroup>

    )

  }



  render() {

    if (this.props.selectedPlayerName) {

      return (

        <div className=details>

          <div className=name>{this.props.selectedPlayerName}</div>

          <button className=inc onClick={this.handleClick}>

            Add 5 points

          </button>

          { this.statusMessage() }

        </div>

      );

    }

    else {

      return (

        <div className=message>Click a player to select</div>

      );

    }

  }

};

CSS

.message {

  line-height: 2.25rem;

  text-align: center;

}



.message-appear {

  opacity: 0.01;

}



.message-appear.message-appear-active{

  opacity: 1;

}