动画 div 在 React 中的容器 div 之间移动 - react-pose？答案

【问题标题】：Animating div to move between container divs in React - react-pose?动画 div 在 React 中的容器 div 之间移动 - react-pose？
【发布时间】：2019-03-23 06:36:06
【问题描述】：

https://codesandbox.io/s/jvq5yk1n29

当按下箭头键时，这个小沙盒会在五个 material-ui Paper 框之间来回移动一个点。当它从一个盒子移动到另一个盒子时，我将如何创建一个流畅的动画？我想出了一个非常复杂的react-pose 解决方案，它不断地轮询容器DOM 元素上的getClientBoundingRect()，以便使用绝对坐标移动点。但这只是一种痛苦。一定有更优雅的东西吗？我不能使用 CSS（？），因为 div 不断被重新安装，没有任何动画可以连接。什么给了？

【问题讨论】：

标签： javascript css reactjs animation

【解决方案1】：

您可以结合使用JS 和CSS。

步骤如下：

使dot 元素准备好向右或向左移动（在 CSS 中）。
创建一个状态变量，用于跟踪点从哪一侧（例如left 或right）进入。
将状态变量传递给您的Dot 组件并相应地更改样式。

这项技术让您可以真正灵活地使用state 为React 中的元素设置动画。

奖励：阅读您的代码后，我想向您推荐以下内容：

尝试始终使用=== 进行比较。
任何绝对定位的元素，其父元素都应该相对定位（即position: relative）
尽量不要重复您的 CSS 规则。

希望对您有所帮助！如果不清楚，请告诉我！

【讨论】：

谢谢！当盒子固定时，这非常有用。但是一旦你引入Grid 断点、行、窗口大小调整等，这种方法不会失效吗？
在桌面而不是我的手机上仔细查看了您的示例。它显然在任何情况下都可以工作，但我一直试图让 div 飞越盒子，而不是在盒子里面。那是另一锅鱼。
当然，你必须让它在你能想到的每个平台上都具有响应性和美观性；这是更改CSS 逻辑的问题。我的示例的目的是解释如何在React 中对其进行管理。
当然。谢谢！您对如何在滚动到下一个框之前修复点消失（由于它被重新安装和重新渲染）有任何建议吗？
为此，您可以删除 container 元素上的 overflow 属性 :)