当使用 react-spring 和 react-three-fiber 转换 canvas parent 的 margin-right 时布局不会回流
Layout does not reflow when transition canvas parent's margin-right with react-spring and react-three-fiber
我正在尝试使用@react-spring 创建一个动画，一个用 r3f 和一些 dom 元素定义到 canvas 中的网格。
实际上，当我更改父容器的 margin-right 时，我无法正确更改 canvas 大小。它不会重排布局，因为如果我滚动或更改 window 尺寸，它就会起作用。另外，如果我删除 canvas 元素并放入 dom 元素，一切都会按预期工作。
为了给你一个想法，我准备了这个codesandbox：https://codesandbox.io/s/nostalgic-bohr-lqxo7
我可以用一些方法解决它吗？
我愿意接受各种建议：从 margin-right 切换到其他内容（宽度、变换等）或使用不同的模式。
例如，我已经尝试将 width 转换为 属性 而不是 margin-right，但模型移动到 canvas 的新尺寸很不优雅。如果将 useSpring 内容更改为 BigWrapperModel 组件，您也可以对其进行测试（您只需要评论和取消评论，它已经在这里）。
谢谢！
我从 margin-right 切换到 right 并将 position: absolute 添加到 container-globe。我还添加了 hidden: overflow 到 wrapper-big-globe。
它似乎有效，容器现在转换到新的大小和位置；模型正确移动。只需检查原始代码和框以获取修复工作示例。
我正在尝试使用@react-spring 创建一个动画，一个用 r3f 和一些 dom 元素定义到 canvas 中的网格。 实际上，当我更改父容器的 margin-right 时，我无法正确更改 canvas 大小。它不会重排布局，因为如果我滚动或更改 window 尺寸，它就会起作用。另外，如果我删除 canvas 元素并放入 dom 元素，一切都会按预期工作。
为了给你一个想法，我准备了这个codesandbox：https://codesandbox.io/s/nostalgic-bohr-lqxo7
我可以用一些方法解决它吗？
我愿意接受各种建议：从 margin-right 切换到其他内容（宽度、变换等）或使用不同的模式。
例如，我已经尝试将 width 转换为 属性 而不是 margin-right，但模型移动到 canvas 的新尺寸很不优雅。如果将 useSpring 内容更改为 BigWrapperModel 组件，您也可以对其进行测试（您只需要评论和取消评论，它已经在这里）。
谢谢！
我从 margin-right 切换到 right 并将 position: absolute 添加到 container-globe。我还添加了 hidden: overflow 到 wrapper-big-globe。
它似乎有效，容器现在转换到新的大小和位置；模型正确移动。只需检查原始代码和框以获取修复工作示例。