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

Question

https://codesandbox.io/s/jvq5yk1n29

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

Answer 1

您可以结合使用 JS 和 CSS 来实现。

步骤如下:

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

这项技术让您真正灵活地决定如何使用 state 在 React 中为您的元素设置动画。

Bonus: after I read your code, I'd like to recommend you the following:

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

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