Activate item when property changes?

Question

How to fade an element when changing a property?

I would like the element returned by the statusMessage() function to disappear every time this.props.statusMessage changes.

No animations are currently applied. This is not like any classes are being added.

 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

I had a similar problem a few weeks ago. The problem is that before you do this, you need to do a ReactCSSTransitionGroup . In your example, both ReactCSSTransitionGroup and this.props.statusMessage.text will be displayed at the same time when this.props.selectedPlayerName === true .

I found this article that might be useful: here

Recently, using the ReactCSSTransitionGroup add-on for React.js, I ran into the problem of being unable to apply an input transition to children when a component is first displayed in the DOM.

When a component is initially displayed, both ReactCSSTransitionGroup and all children are displayed in the DOM at the same time. However, the ReactCSSTransitionGroup will apply the appropriate animation classes to any children that enter the DOM after the initial render.

Answer 2

It might be easier with react-animate-on-change (disclaimer, I'm the author).

In the render, you will 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 the animation in CSS:

 .message-clicked { animation: clicked-keyframes 1s; } @keyframes clicked-keyframes { from {opacity: 0.01} to {opacity: 1} } 

It is hard to imagine how you want the result to be. But to the sounds of this, do you have a list of players that you can click on and then browse the selected players? In this case, you better use an array with the selected players and use the ReactCSSTransitionGroup to display the players entering / leaving the array.

Answer 3

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

React uses this key to manipulate the DOM. Therefore, it must be unique. Also, in my experience, you should have the Appear and transitionEnter transitions set in the same way, so that the initial animation and the animation for the change look the same.

So, you need to provide some unique keys (or at least different between the current state (or props) and the next state (or props) of the child 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 find out how this works.

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