如果元素顺序发生变化，React 会丢失 CSS 过渡

Question

React 键不起作用。

如果我交换使用变换 transform: translate(); 定位的两个反应元素（item0 和 item1）的位置，则仅当元素以相同的顺序呈现时才会触发 css 转换。

如果我更改渲染顺序（位置交换仍然相同，但现在 item0 在 item1 之后渲染），css 过渡未触发。

看起来 react 正在删除 DOM 元素并重新创建它，即使 他们设置了 React 键。

这是一个解决问题的简单 JSfiddle。

https://jsfiddle.net/santiagopuentep/vvpezbp9/2/

以下是书面说明：

两个 React 元素（item0 和 item1）在 css 中以 transform: translate(); 定位，并且 css 转换 对该转换处于活动状态。

应用程序使用布局呈现项目列表。

第一个布局是： item0 translate(0px,0px); 和 item1 translate(0px,50px);。

具有相同项目但位置翻转的第二个布局： item0 translate(0px,50px); 和 item1 translate(0px,0px);。

点击这两个项目中的任何一个来改变两个项目的布局，交换它们的位置，从而触发 css 转换来改变位置。 p>

这只是很好，转换触发正确。

如果第二个布局使 item1 在 item0 渲染（仅更改渲染顺序，css 转换位置仍然交换），转换为第二个元素丢失了。

这看起来像 React 正在删除元素而不是重新排序它，即使我设置了键。

请帮忙！

Answer 1

非常感谢！我确认了这个问题，所以解决方法是：

lastOrder = []
render() {
    let cards=this.props.cardList
    // HERE I RESORT NEW LIST LIKE PREVIOUS IT
    if (this.lastOrder.length) cards.sort((a, b) => 
         (this.lastOrder.indexOf(a.id) - this.lastOrder.indexOf(b.id)))
    // AND SAVE LAST ORDER
    this.lastOrder = cards.map(card => card.id)
    return <div className='board'>
            {cards.map(card => <Card key={card.id} {...card} />)}
    </div>
}