Animiere Bewegung der React-Komponente von einem zum anderen

Question

Ich versuche herauszufinden, wie man bewegte reaktive Komponenten von einem zum anderen animiert. Nehmen Sie zum Beispiel ein sehr einfaches, aber interessantes Kartenspiel: Sie können jede Karte auf ein Deck legen oder die oberste Karte vom Stapel nehmen.

Um es funktionieren zu lassen, habe ich 4 Klassen - <Board>, die zwei <Card Collection> enthält: "Deck" und "Hand" -Komponenten. Im Konstruktor generieren sie CardModel-Elemente und rendern sie über die Komponente <Card>. <CardCollection> Komponente hat spezielle onCardClick Prop, die Callback-Funktion übernimmt. In meinem Fall ist es onCardClick={/*this is equal to <Board>*/ this.transferCard("Hand")}

Board.transferCard nimmt angeklickt CardModel aus dem Zustand einer Komponente und schiebt es zu einem anderen.

Das Problem ist Animation - Ich möchte Karte fliegen, vorzugsweise durch Mitte (optional!) Von altem Ort zu neuen. Ich bin in der Lage, die neu erstellte Karte an "neuen Ort" an der gleichen Stelle wie die alte Komponente zu platzieren, aber da ich nur versucht habe, React zu lernen, bin ich mir nicht sicher, wo genau ich anfangen soll. Umbruch in ReactCSSTransitionGroup? Übergeben Sie die Eigenschaft "animate: from {x, y} to {x, y}" an <CardCollection>?

Also die volle Frage ist, was ist die allgemeinste, kontrollierbar und "reagieren" Weg, um diese Situation zu animieren?

JSFiddle Basis Frage Version: https://jsfiddle.net/fen1kz/6qxpzmm6/

JSFiddle erste Animation Prototypversion: https://jsfiddle.net/fen1kz/6qxpzmm6/1

ich hier nicht <this.state.animations.map... mag. Auch die Animationskomponente sieht für mich wie ein Greuel aus, ich bin mir nicht sicher, ob das der gute Architekturstil für React ist.

Answer 1

Der Hauptfehler, den ich gemacht habe, ist zu versuchen, Render-Funktion mit Animation zu mischen. Nein! Render sollte nichts enthalten, was mit Animation zu tun hat (vorzugsweise nicht einmal Starter-Werte), während die gesamte Animation nach dem Rendern erfolgen sollte. Das einzige, was mich stört, ist, dass ich nach wie vor Zustand von Animationen in CardCollection haben sollte einfach in der Karte Schöpfung zu werfen

Beispiel Arbeiten: 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

Nur eine Idee: Sie könnten versuchen, jQuery animate für die Animation der Bewegung eines HTML-Elements von einem Ort zum anderen zu verwenden. Sobald die Animation abgeschlossen ist, gibt es eine complete Funktionseigenschaft nur dann können Sie Ihre onCardClick auslösen.