Elements doesn't survive state change for css transitions in React

Question

I have a highscore list that updates automatically with current scores once every minute.

It then updates the component with this.setState({ data: newData });.

Below I sort the new data by score, run each item through map that updates their style.top.

Javascript

...

let current = this.state.data.sort((a,b) => {
  if(a.score < b.score) return -1;
  if(a.score > b.score) return 1;
  return 0;
});

let items = current.map((item,i) => {
  return (
    <div
      key={item.name}
      className="item"
      style={{ top: (i*30) + 'px', backgroundColor: item.color }}>
        {item.name}
    </div>
  );
});

return (
  <div>
    {items}
  </div>
);

CSS

.item {
  position: absolute;
  transition: top 1s;
}

I want the items to animate up and down to their new positions, but this doesn't happen. The browser seems to remember parts of the DOM, but not others.

React seems to understand which item is which by using the unique key, if I inspect using React Developer Tools, but the actual DOM doesn't.

Even stranger, only items moving up the list (higher score) seems to be remembered. Items moving down is recreated, and therefor the transition doesn't work. They just pop into existence without transitioning to their new position.

Here is a working example to demonstrate. (JSFiddle)

James Brierley · Accepted Answer · 2017-06-05 16:04:58Z

3

If you change it so that the items are not reordered between render cycles, but are always rendered in the same order with different top styles, it animates correctly. I think this is because changing the order of elements forces them to be removed from the DOM and re-added by react.

The relevant code is:

render() {
    let current = this.state.data.slice().sort((a,b) => {
        if(a.score < b.score) return -1;
        if(a.score > b.score) return 1;
        return 0;
    });

    let items = this.state.data.map(item => {
        let position = current.indexOf(item);
        return (
          <div
            key={item.name}
            className="item"
            style={{ top: (position*30) + 'px', backgroundColor: item.color }}>
                {item.name}
          </div>
        );
    });

    return (
      <div>
        {items}
      </div>
    );
}

Updated demo

answered Jun 5, 2017 at 16:04

James Brierley

4,6801 gold badge22 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Magnus Engdal Over a year ago

That is perfect! Thank you!

Jesper Bylund · Accepted Answer · 2017-06-05 14:19:25Z

1

React redraws the DOM elements you update. This will resolve in really odd behaviours, such as blinking, jumping etc.

The React team offered a couple of solutions for this before they started working on Fiber instead. With the release of Fiber I hope we'll see better support for transitions and animations.

Until that time, I recommend you use external libs for animations such as: https://github.com/FormidableLabs/react-animations For general animation.

And https://github.com/reactjs/react-transition-group for elements entering and exiting the DOM.

answered Jun 5, 2017 at 14:19

Jesper Bylund

9639 silver badges23 bronze badges

Collectives™ on Stack Overflow

Elements doesn't survive state change for css transitions in React

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related