React 组件从一个到另一个的动画移动

Question

我试图弄清楚如何为从一个到另一个移动的反应组件设置动画。以非常简单但有趣的纸牌游戏为例：您可以将任何卡放在一副牌上，或者从一副牌中取出顶牌。

为了使它工作，我有 4 个类 -<Board>其中包含两个<Card Collection>：“Deck”和“Hand”组件。在构造函数中，它们生成 CardModel 项并通过<Card>组件呈现它们。<CardCollection>组件有特殊的onCardClick道具，它接受回调函数。就我而言，它是onCardClick={/*this is equal to <Board>*/ this.transferCard("Hand")}

Board.transferCard 从一个组件的状态中获取单击的 CardModel 并将其推送到另一个组件。

问题是动画 - 我想要卡片飞，最好通过中心（可选！）从旧地方到新地方。我可以将新创建​​的 Card 放在“新位置”与旧组件相同的位置，但是，由于我刚开始学习 React，我不确定我应该从哪里开始。包裹在 ReactCSSTransitionGroup 中？将“动画：从{x，y}到{x，y}”属性传递给<CardCollection>？

所以完整的问题是什么是最通用、最可控和“反应”的方式来为这种情况设置动画？

JSFiddle基本问题版本：https ://jsfiddle.net/fen1kz/6qxpzmm6/

JSFiddle第一个动画原型版：https ://jsfiddle.net/fen1kz/6qxpzmm6/1

我不喜欢<this.state.animations.map...这里。此外，动画组件对我来说看起来很可恶，我不确定这是 React 的良好架构风格。

Answer 1

我犯的主要错误是尝试将渲染功能与动画混合在一起。不！渲染不应包含与动画相关的任何内容（最好甚至不包含起始值），而所有动画都应在渲染后发生。唯一困扰我的是，我仍然应该在 CardCollection 中拥有动画状态，以便将其投入到 Card 的创建中

工作示例：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
               />