ある反応成分から別の反応成分への移動をアニメ化する

Question

私は、反応成分を動かす方法を理解しようとしています。たとえば、非常にシンプルで面白いカードゲームを取る：デッキにカードを置くか、デッキから一番上のカードを取ることができます。

私は4つのクラスを持っています - <Board>には2つの<Card Collection>： "Deck"と "Hand"コンポーネントがあります。コンストラクタでは、CardModelアイテムを生成し、<Card>コンポーネント経由でレンダリングします。 <CardCollection>コンポーネントには、コールバック機能を持つ特別なonCardClick propがあります。私の場合はonCardClick={/*this is equal to <Board>*/ this.transferCard("Hand")}

Board.transferCardは、1つのコンポーネントの状態からクリックして別のコンポーネントにプッシュします。

問題はアニメーションです - 私はカードを、好ましくはセンター（オプション！）を使って元の場所から新しい場所に飛ばしたいです。私は新しく作成されたカードを古い場所と同じ場所に「新しい場所」に置くことができますが、Reactを学ぶためにスタットしているので、どこから始めるべきかわかりません。 ReactCSSTransitionGroupをラップしますか？ "animate：{x、y}から{x、y}"プロパティに<CardCollection>に渡しますか？

したがって、この状況をアニメーション化する最も一般的で、制御可能で、「反応する」方法は何ですか？

JSFiddleベース質問バージョン：https://jsfiddle.net/fen1kz/6qxpzmm6/

JSFiddle最初のアニメーションのプロトタイプ版：https://jsfiddle.net/fen1kz/6qxpzmm6/1

私はここ<this.state.animations.map...が好きではありません。また、Animationコンポーネントは私にとって忌み嫌われているように見えますが、これはReactの優れたアーキテクチャスタイルであるとは確信できません。

Answer 1

私が主にした間違いは、レンダリング機能とアニメーションを混ぜてみることです。いいえ！レンダリングはアニメーションに関連するものを含んではいけません（できればスターター値でなくてもかまいません）。すべてのアニメーションはレンダー後に起こるはずです。私は例のセクションを更新しましたhttps://jsfiddle.net/fen1kz/6qxpzmm6/4/

 let animation; 
     if (this.animations[cardModel.id] != void 0) { 
     animation = this.animations[cardModel.id]; 
     this.animations[cardModel.id] = void 0; 
     } 
     ... 
     return <Card 
       cardModel={cardModel} 
       onCardClick={onCardClick} 
       animation={animation} 
       position={this.getCardPosition(i)} 
       index={i} 
       key={cardModel.id} 
       ref={cardModel.id} // prolly not needed 
       /> 

Answer 2

ちょっとしたアイデア：jQuery animateを使用して、HTML要素をある場所から別の場所に移動するアニメーションを試すことができます。アニメーションが完了すると、complete関数のプロパティがあり、それで初めてonCardClickがトリガされます。