元素无法在 React 中的 css 转换状态更改中存活答案

【问题标题】：Elements doesn't survive state change for css transitions in React元素无法在 React 中的 css 转换状态更改中存活
【发布时间】：2017-11-06 07:48:54
【问题描述】：

我有一个高分列表，每分钟自动更新一次当前分数。

然后它使用this.setState({ data: newData }); 更新组件。

在我sort 下按分数新数据，通过map 运行每个项目，更新他们的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;
}

我希望项目上下动画到它们的新位置，但这不会发生。浏览器似乎记住了 DOM 的一部分，但没有记住其他部分。

如果我使用 React 开发人员工具进行检查，React 似乎可以通过唯一键了解哪个项目是哪个项目，但实际的 DOM 并没有。

即使是陌生人，似乎也只会记住列表中向上移动的项目（更高的分数）。向下移动的项目被重新创建，因此过渡不起作用。他们只是突然出现而没有过渡到他们的新职位。

Here is a working example to demonstrate. (JSFiddle)

【问题讨论】：

标签： javascript reactjs transition

【解决方案1】：

如果您更改它以使项目在渲染周期之间不重新排序，但始终以不同的顶部样式以相同的顺序渲染，则它会正确动画。我认为这是因为更改元素的顺序会迫使它们从 DOM 中删除并通过 react 重新添加。

相关代码为：

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

【讨论】：

太完美了！谢谢！

【解决方案2】：

React 会重绘你更新的 DOM 元素。这将解决非常奇怪的行为，例如眨眼、跳跃等。

React 团队在开始研究 Fiber 之前为此提供了几个解决方案。随着 Fiber 的发布，我希望我们能看到对过渡和动画的更好支持。

在此之前，我建议您将外部库用于动画，例如： https://github.com/FormidableLabs/react-animations一般动画。

https://github.com/reactjs/react-transition-group 用于元素进入和退出 DOM。

【讨论】：