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

我想弄清楚如何将移动的反应组件从一个移动到另一个。例如，玩一个非常简单而又有趣的纸牌游戏：你可以将任何牌放在甲板上，或从甲板上拿顶牌。将React组件从一个移动到另一个的动画效果

为了使它工作，我有4个类 - <Board>其中包含两个<Card Collection>：“甲板”和“手”组件。在构造函数中，它们生成CardModel项目并通过<Card>组件呈现它们。 <CardCollection>组件有专门的onCardClick支持回调函数。在我的情况下，它是onCardClick={/*this is equal to <Board>*/ this.transferCard("Hand")}

Board.transferCard需要从一个组件的状态点击CardModel并推到另一个。

问题是动画 - 我想卡飞，最好通过中心（可选！）从旧地方到新。我能够将新创建的卡片放置在“新地方”与旧组件相同的地方，但是，因为我只是表示要学习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的良好架构风格。

来源

2016-07-22 Fen1kz

我所做的主要错误是尝试将渲染功能与动画混合使用。没有！渲染不应包含与动画相关的任何内容（最好不要包括起始值），而所有动画应在渲染后进行。困扰我的唯一的事情是，我应该还是有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 
       />

来源

2016-08-01 12:50:34 Fen1kz

只是一个想法：你可以尝试使用jQuery animate动画的HTML元素从一个地方移动到另一个地方。一旦动画完成，就有一个complete函数属性，只有这样你才能触发你的onCardClick。

来源

2016-07-22 14:22:18 anvk

我已经更新的例子部分。使用Velocity.js，如你所见 - 这仍然是不可接受的解决方案。多张卡片无法使用。另外，关于我的是，我在没有反应的情况下操纵dom。不知道它是否好 – Fen1kz

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

回答

相关问题