使用水平 MUI 折叠组件和 TransitionGroup 过渡时，如何使 Flexbox 与儿童一起使用？

Question

我正在使用 MUI，并且很难使用 Collapse + TransitionGroup 组件并使用弹性框来扩展容器。

<Box sx={{display: 'flex', height: '100vh', width: '100vw'}}>
  <Box sx={{flex: 1}}>Content-A</Box>
  <Box sx={{flex: 1}}>Content-B</Box>
</Box>

这是我想要的一个简单示例。 两个盒子彼此相邻，将整个页面分成左右两边。 但是，当您引入 Collapse 组件时，它会中断：

<TransitionGroup sx={{display: 'flex', height: '100vh', width: '100vw}}>
  <Collapse orientation='horizontal'>
    <Box sx={{flex: 1}}>Content-A</Box>
  </Collapse>
  <Collapse orientation='horizontal'>
    <Box sx={{flex: 1}}>Content-B</Box>
  </Collapse>
</TransitionGroup>

Collapse 组件现在直接干扰 Flexbox 父子关系。 如果我查看 DOM，我注意到 Collapse 组件在子组件周围插入了 3 个包装器（根、外部、内部包装）。 如何将 flexbox 属性传递给原始子项？
我尝试覆盖主题中每个包装组件的样式并给它们display: flex, flex: 1以强制它一直沿着链向下传递到子级，但这会破坏过渡，并且看起来非常不稳定。

编辑：澄清：我需要过渡组，因为我希望发生特定的过渡。 基本上我的页面分为左（A）和右（B）。 在一个事件中，我希望 (A) 转换出屏幕（向左，因此是水平的）。 (B) 应该过渡到 (A) 所在的位置，并且一个新元素 (C) 从右侧进入并过渡到 (B) 所在的位置。 想象一下它就像一个滑动队列。 然后冲洗并重复（B out -> C 转到 B 所在的位置 -> D 过渡到 C 所在的位置）。 问题是使用 Collapse Horizontal 它不会弯曲剩余空间。

Answer 1

它有点不清楚你实际上想要实现什么。

为什么要使用过渡组？

通常使用<TransistionGroup /> <Collapse/>的in属性。 例如，在列表中添加一堆项目时。

如果您只想渲染 2 列，则不需要<TransistionGroup /> 。
您可以手动传递in 。

造型倒塌。

您可以将样式传递给折叠包装器并设置您需要的任何 css。 IE：

       <Collapse
          in={isOn}
          orientation="horizontal"
          style={{ flex: "1", display: "inline-block" }}
        >

例子

看看这个代码沙箱

它有两个例子：

• 仅打开/关闭列的版本 1
• 版本 2 添加列并使用转换组来扩展它们

我认为第 1 版是您真正想要的：

const Example1 = () => {
  const [isOn, setIsOn] = React.useState(false);

  const toggle = () => {
    setIsOn((prev) => !prev);
  };

  return (
    <>
      <Button variant="contained" onClick={toggle}>
        {isOn ? "collapse" : "expand"}
      </Button>

      <Box display="flex">
        <Collapse
          in={isOn}
          orientation="horizontal"
          style={{ flex: "1", display: "inline-block" }}
        >
          <Box>Content-A</Box>
        </Collapse>
        <Collapse
          in={isOn}
          orientation="horizontal"
          style={{ flex: "1", display: "inline-block" }}
        >
          <Box>Content-B</Box>
        </Collapse>
      </Box>
    </>
  );
};