5

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

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

PS：如果这不可能，请告诉我任何其他轻量级扩展面板（手风琴）与样式定制一起使用。

4

3 回答 3

5

是的。您可以通过操作 TransitionProps 道具来做到这一点，如下所示：

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

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

于 2019-06-26T19:46:39.453 回答
0

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

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

您也可以将其应用于展开面板折叠 div

于 2021-07-07T11:09:07.900 回答
0

这是一个老问题，但您可以覆盖展开图标的 css 并将转换属性更改rotate(0deg)为禁用图标上的动画。

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

更多关于定制的细节可以在这里找到

于 2021-10-05T19:52:54.950 回答