reactjs - MUI : ExpansionPanel with TransitionComponent doesn't collapse the item

Question

我将 ExpansionPanel 与 TransitionComponent 属性一起使用，当我设置默认值(折叠)时，扩展面板工作正常，但如果值是另一个(淡入淡出、增长等)，折叠的组件与展开的高度相同

<ExpansionPanel
    expanded={expanded === '1'}
    onChange={handleChange('1')}
    TransitionComponent={Slide}
    TransitionProps={{ mountOnEnter: true }}
    className={classnames('accordion-item', expanded === '1' && 'selected')}
>

UPD:有一个片段 https://codesandbox.io/s/vigorous-tree-621cz?fontsize=14&hidenavigation=1&theme=dark

Answer 1

要使 Slide 过渡正常工作，需要两个方面。

为了适当调整高度，您需要在 TransitionProps 中指定 mountOnEnter 和 unmountOnExit。

要处理的另一个方面是 timeout 属性。 Accordion (以前的 ExpansionPanel)specifies the timeout as "auto" ，但“auto”仅作为超时值被 Collapse 支持，因此您需要为 Slide 指定一个有效的超时值。在我修改后的沙箱版本中，我使用的是 default values for Slide进入 225，退出 195。

这是一个工作示例:

import React, { useState } from "react";
import {
  Accordion,
  AccordionSummary,
  AccordionDetails,
  Slide
} from "@material-ui/core/";

const slideProps = {
  mountOnEnter: true,
  unmountOnExit: true,
  timeout: { enter: 225, exit: 195 }
};

export default function App() {
  const [expanded, setExpanded] = useState(null);
  return (
    <>
      <Accordion
        TransitionComponent={Slide}
        TransitionProps={slideProps}
        expanded={expanded === "1"}
        onChange={() => setExpanded("1")}
      >
        <AccordionSummary aria-controls="panel1d-content" id="panel1d-header">
          First
        </AccordionSummary>
        <AccordionDetails>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
          malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum
          dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
          lacus ex, sit amet blandit leo lobortis eget.
        </AccordionDetails>
      </Accordion>
      <Accordion
        TransitionComponent={Slide}
        TransitionProps={slideProps}
        expanded={expanded === "2"}
        onChange={() => setExpanded("2")}
      >
        <AccordionSummary aria-controls="panel1d-content" id="panel1d-header">
          Second
        </AccordionSummary>
        <AccordionDetails>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
          malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum
          dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
          lacus ex, sit amet blandit leo lobortis eget.
        </AccordionDetails>
      </Accordion>
    </>
  );
}