リアクションのCSSトランジションの要素が状態変化を生き延びることはありません

1分ごとに最新のスコアを自動的に更新するハイスコアリストがあります。リアクションのCSSトランジションの要素が状態変化を生き延びることはありません

次に、コンポーネントを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 Developer Toolsを使用して検査すると、固有のキーを使用してどのアイテムが実際のDOMを使用しているかを理解しているようです。

見知らぬ人でも、リストを上に移動するアイテム（高いスコア）だけが記憶されているようです。下に移動する項目が再作成され、そのために移行が機能しません。彼らは彼らの新しい地位に移行することなく、ただ存在する。

Here is a working example to demonstrate. (JSFiddle)

出典

2017-06-05 Magnus Engdal

アイテムがレンダリングサイクル間で並べ替えられないように変更されますが、異なるスタイルのトップスタイルで常に同じ順序でレンダリングされるようにすると、正しくアニメーション化されます。これは、要素の順序を変更するとDOMから削除され、反応によって再追加されるためです。

関連するコードは次のとおりです。

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

出典

2017-06-05 16:04:58

完璧ですそれ！ありがとうございました！ –