动画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. 创建一个状态变量，以跟踪点从哪一侧进入（例如left或right）。
3. 将状态变量传递到您的Dot组件，并相应地更改样式。

  

这项技术确实为您提供了使用React在state中为元素设置动画方式的灵活性。

  

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

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

希望能有所帮助！让我知道是否不清楚！