React animate element when property changes?

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.

The official documentation states that you need to provide a key for each element inside ReactCSSTransitionGroup

React uses this key for the DOM manipulation. So it should be unique. Also from my experience you should have transitionAppear and transitionEnter configured the same way, so that initial animation and animation for the change looks the same.

So you need to provide some unique keys (or at least different between current state (or props) and next state (or props) of the child element for each change) for the ReactCSSTransitionGroup

<ReactCSSTransitionGroup transitionName="example"
                         transitionAppear={true}
                         transitionAppearTimeout={500}
                         transitionLeaveTimeout={500}
                         transitionEnterTimeout={500}>
    <h1 key={key}>Hello, {name}</h1>
<ReactCSSTransitionGroup>

You can check out JSFIDDLE to see how it works.

NOTICE that I've used {this.state.name} as a key, so it works ok in my example. But in a real world application I think you should use something else as a key

I had a similar issue a few weeks ago. The issue is that the ReactCSSTransitionGroup needs to be rendered before it's children. In your example both ReactCSSTransitionGroup and this.props.statusMessage.text will be rendered at the same time when this.props.selectedPlayerName === true.

I found this article that might be useful: here

Recently while using the ReactCSSTransitionGroup add-on for React.js, I ran into the issue of not being able to apply the enter transitions to the child elements when the component is first rendered to the DOM.

When the component is initially rendered, both the ReactCSSTransitionGroup and all of its child elements appear in the DOM at the same time. However, the ReactCSSTransitionGroup will only apply the appropriate animation classes to any child elements which enter the DOM after the initial render.