如果元素排序變化，React會丟失CSS轉換

Question

反應鍵不起作用。

如果我交換的兩個位置反應的元素（item0和item1）定位成與變換transform: translate();的CSS過渡被觸發時，僅當元素被以相同的順序呈現。

如果我改變呈現的順序（位置互換仍然是相同的，但現在item0後物品1渲染），CSS的過渡不會觸發。

它看起來像反應刪除DOM元素並重新創建它，即使他們有他們有React鍵集。

這是一個簡單的JSfiddle問題。

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

這裏是一個書面說明：

兩個陣營定位transform: translate();元件（item0和item1）在CSS和一個CSS過渡活性該變換。

應用程序使用佈局呈現項目列表。

第一個佈局是： item0在translate(0px,0px);和item1在translate(0px,50px);。

第二個佈局與相同的項目，但位置翻轉： item0在translate(0px,50px);和item1在translate(0px,0px);。

點擊任何兩個項目的改變了佈局來回來自兩個，交換它們的位置，從而觸發對於位置變化的CSS過渡。

這隻適用於罰款，轉換觸發正確。

的問題發生，如果第二個佈局使得物品1渲染後 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> 
}