使用水平 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>
    </>
  );
};