有没有办法禁用Material UI扩展面板的动画？

Question

我想禁用 React 中 Material UI 扩展面板的动画。如何禁用应用于扩展面板的所有动画？

尝试覆盖过渡，但没有帮助。让我知道你将如何覆盖它。

PS：如果不可能，请告诉我任何其他轻量级扩展面板（手风琴）可用于样式自定义。

Answer 1

是的。您可以通过操纵 TransitionProps 属性来做到这一点，如下所示：

  <ExpansionPanel
    defaultExpanded
    square
    TransitionProps={{
      timeout: 0
    }}
  >

可以通过查看 Collapse API 来发现 timeout: 0 属性，这是 ExpansionPanel 的默认 TransitionComponent：https://material-ui.com/api/collapse/

Answer 2

这对我有用

<Accordion disableGutters={true}>

Answer 3

我使用以下 css 禁用 Material-UI Accordion 上的动画：

.MuiCollapse-container {
  transition-duration:0s!important
}

您或许也可以将其应用到扩展面板折叠 div 上

Answer 4

这是一个老问题，但您可以覆盖展开图标的 css 并将变换属性更改为

rotate(0deg)

以禁用图标上的动画。

.MuiExpansionPanelSummary-expandIcon.Mui-expanded {
   transform: rotate(0deg);
}

有关定制的更多详细信息可以在此处

找到

Answer 5

如果其他人在使用 MUI 扩展面板或 Accordion 组件扩展动画时遇到问题，这将导致其在合理的时间内简单地打开和关闭。

<Accordion
      disableGutters={true}
      TransitionProps={{ timeout: { appear: 1, enter: 1, exit: 4 } }}
    >