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

Question

我正在尝试找出如何动画移动React组件。例如，采取非常简单但有趣的纸牌游戏：您可以将任何卡放入牌堆中，或从牌堆中取出顶部卡。

为了使其工作，我有4个类 - 持有两个：“Deck”和“Hand”组件。在构造函数中，它们生成CardModel项目，并通过组件呈现它们。 组件具有特殊的onCardClick prop，它需要回调函数。在我的情况下，它是onCardClick={/*this is equal to <Board>*/ this.transferCard("Hand")} Board.transferCard从一个组件的状态中获取已点击的CardModel，并将其推送到另一个组件。

问题在于动画 - 我希望卡片飞行，最好是通过中心（可选！）从旧位置到新位置。我能够将新创建的Card放置在“新位置”，并与旧组件放置在同一位置，但是，由于我刚开始学习React，我不确定应该从哪里开始。在ReactCSSTransitionGroup中包装？将“animate:from{x,y}to{x,y}”属性传递给？

因此，完整的问题是什么是最通用，可控且“反应”的方法来动画化这种情况？

JSFiddle基础问题版本：https://jsfiddle.net/fen1kz/6qxpzmm6/ JSFiddle第一个动画原型版本：https://jsfiddle.net/fen1kz/6qxpzmm6/1 我不喜欢<this.state.animations.map...在这里。此外，Animation组件对我来说看起来像是一种可怕的东西，我不确定这是否是React的良好架构风格。

- Fen1kz

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
               />

- Fen1kz

Answer 2

您可以尝试使用我制作的一个名为 react-singular-component 的包，它可能实际上就是你需要的。

这个组件允许您渲染一个组件多次，并且根据给定的优先级只有最高的一个将被渲染。挂载和卸载给定的组件将导致下一个最高优先级的组件进行渲染，同时通过动画将组件从其上一个位置和大小移动并包装到新位置。

这是 Github 页面：https://github.com/dor6/SingularComponent。

- Dor6

---

欢迎来到Stack Overflow！虽然链接是分享知识的好方法，但如果它们在未来失效了，它们就无法真正回答问题。在您的答案中添加回答问题的链接的基本内容。如果内容过于复杂或太大而无法适合此处，请描述所提出解决方案的一般想法。请记住始终保留对原始解决方案网站的链接引用。参见：如何撰写良好的答案？ - sɐunıɔןɐqɐp

Answer 3

只是一个想法：您可以尝试使用 jQuery animate 来实现将某个HTML元素从一个位置移动到另一个位置的动画效果。一旦动画完成，就只有一个complete函数属性，然后您才能触发onCardClick。

- anvk

---

我已更新示例部分。使用了Velocity.js，但仍然是不可接受的解决方案。多个卡片无法正常工作。此外，让我担心的是，我在没有告知React的情况下操作DOM。不确定这是否好。 - Fen1kz