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

Question

我正在尝试弄清楚如何为将 react 组件从一个移动到另一个设置动画。例如，以非常简单但有趣的纸牌游戏为例:您可以将任何纸牌放入牌组，或从牌组中取出最上面的牌。

为了让它发挥作用，我有 4 节课 - <Board>其中包含两个 <Card Collection> :“甲板”和“手”组件。在构造函数中，它们生成 CardModel 项并通过 <Card> 渲染它们零件。 <CardCollection>组件有特殊的onCardClick prop 接受回调函数。就我而言，它是 onCardClick={/*this is equal to <Board>*/ this.transferCard("Hand")}Board.transferCard从一个组件的状态中获取单击的 CardModel 并将其推送到另一个组件。

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

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

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

JSFiddle第一个动画原型(prototype)版本:https://jsfiddle.net/fen1kz/6qxpzmm6/1

我不喜欢 <this.state.animations.map...这里。而且 Animation 组件对我来说看起来很讨厌，我不确定这是否是 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
               />