Question

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

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

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

问题是动画 - 我想要卡片飞行，最好通过中心（可选！）从旧地方飞到新地方。我可以将新创建的卡片放入＆＃34;新的地方＆＃34;和旧组件在同一个地方，但是，由于我很高兴学习React，我不确定我应该从哪里开始。包装在ReactCSSTransitionGroup中？传递＆＃34;动画：从{x，y}到{x，y}＆＃34;属性为<CardCollection>？

所以完整的问题是什么是最通用的，可控的和＃34;反应＆＃34;动画这种情况的方法？

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

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

我不喜欢<this.state.animations.map...。动画组件对我来说也是一种憎恶，我不确定这是React的良好架构风格。

Answer 1

我犯的主要错误是尝试将渲染功能与动画混合。没有！渲染不应包含任何与动画相关的内容（最好不是起始值），而所有动画都应该在渲染后发生。困扰我的唯一一件事就是我仍然应该在CardCollection中拥有动画状态，只是为了把它投入到卡片的创作中

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

Answer 3

您可以尝试使用我制造的名为react-singular-component的软件包，它实际上可以满足您的需求。

该组件允许您渲染组件服务器时间，并且按照给定的优先级，只有最高的渲染一次。挂载和取消计数给定组件将导致呈现次高优先级，而通过动画将组件从其最后位置和大小移动并包装到新组件。

以下是Github页面：https://github.com/dor6/SingularComponent

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

3 个答案: