如何使用响应式框架制作飞行div的CSS动画？

问：

出于教育目的，我正在实施纸牌游戏。我想为发牌制作动画。我在游戏屏幕上有一副牌和 1..4 名玩家。目前，我正在使用 React 和 MUI 作为 ui 框架，尤其是 Grid 元素来安排牌组和手牌。游戏 UI 应该是响应式的，可以在小屏幕和大屏幕上工作。

现在我正试图弄清楚如何为发牌制作动画。卡牌飞行效果，从庄家的牌组到玩家的手牌。

谢谢

如果我有一个“table”div 并且修复了与表相关的每个堆栈的“top”和“left”属性，那么对其进行动画处理没有问题。例如，我定义了 5 个具有固定位置的 div 元素。在这种情况下，我可以最初将新发牌的顶部和左侧属性设置为等于庄家的牌组，并将其更改为玩家手牌 （div） 的“顶部”和“左侧”值。在这种情况下，我已经让动画工作了。但是我必须为每种可能的屏幕尺寸定义位置，小、大、中。

因此我很好奇，如果有可能在“flex”div 结构中通过 id（或在 ref 做出反应的情况下）获取任何其他 div 的绝对 X 和 Y，并将值设置为我的新“dealt”div，然后将其更改为“玩家手”div 的目标位置？

或者使用绝对位置更容易做到，就像上面描述的不同屏幕尺寸一样？通常的方法是什么？

有一个带有我示例的 sanbox。

https://codesandbox.io/s/quirky-villani-yx5943?file=/src/App.js

有一个组件 AlreadyWorkingWithAbsolutePosition。这是我已经拥有的。如果你点击发牌，牌就会飞起来。但是，为游戏屏幕的所有元素、不同的屏幕尺寸（移动、桌面）设置所有位置非常复杂。例如，我需要为每手牌添加上述投注金额，也许是一些按钮。

还有另一个组件 HowIDoGridTheSame，这就是我所做的。让浏览器重新排列我的游戏元素以获得不同的大小。但是我不知道如何制作这个动画。因为我不知道我的手到底在哪里。