MUI：带有 TransitionComponent 的 ExpansionPanel 不会折叠项目

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）将超时指定为 "auto"，但仅支持 "auto" 作为超时值，Collapse因此您需要为 指定有效的超时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>
    </>
  );
}