动画div之间移动容器div在反应-反应-姿态？

Question

https://codesandbox.io/s/jvq5yk1n29

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

Answer 1

您可以通过JS和CSS的组合来实现这一点。

以下是步骤：

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

这种技术为您提供了使用React使用state动画元素的灵活性。

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

• 请始终在比较中使用===。
• 任何绝对定位的元素，其父元素都应该具有相对位置(即position: relative)。
• 尽量不要重复CSS规则。

希望能帮上忙！如果不清楚请告诉我！