React animate element when property changes?

Question

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;
}

Answer 1

This might be easier with react-animate-on-change (disclosure: I'm the author).

In render you would do something like this:

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>
        <AnimateOnChange 
          baseClassName="message" 
          animationClassName="message-clicked" 
          animate={this.props.selectedId === this.props.id}>
            {this.props.statusMessage.text}
        </AnimateOnChange>
      </div>
    );
  }
  else {
    return (
      <div className="message">Click a player to select</div>
    );
  }
}

And then use animation in your CSS:

.message-clicked {
  animation: clicked-keyframes 1s;
}

@keyframes clicked-keyframes {
  from {opacity: 0.01}
  to {opacity: 1}
}

It's hard to imagine how you want the result to be. But to the sounds of it, you have a player list which can be clicked and then a view of selected players? In that case, you should rather use an array with selected players and use ReactCSSTransitionGroup to render players entering/leaving the array.