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

【问题标题】：Is there a way to disable Material UI expansion panel's animation?有没有办法禁用 Material UI 扩展面板的动画？
【发布时间】：2019-08-20 19:07:17
【问题描述】：

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

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

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

【问题讨论】：

MD CSS 中的几乎所有内容都标记为“！important”。我会尝试覆盖将您的覆盖标记为“！important”的css，以便它正确地级联。
@EvSunWoodard Material-UI（问题中引用的 React 组件库——不是 Material Design）在其样式中几乎没有使用“！important”。
@ShahLav ExpansionPanel unconditionally uses Collapse 转换。您要进行哪种样式自定义？

【解决方案1】：

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

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

更多定制详情请见here

【讨论】：

【解决方案2】：

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

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

你也可以在展开面板折叠div上应用它

【讨论】：

【解决方案3】：

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

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

timeout: 0 属性可以通过查看 Collapse API 来发现，它是 ExpansionPanelTransitionComponent /em>：https://material-ui.com/api/collapse/

【讨论】：

当我把它放在我的标签中时，这似乎没有效果。过渡动画仍然存在。
实际上，进一步看，我发现此设置确实会影响实际的折叠/展开转换本身，但是似乎没有办法在 expandIcon 上进行转换（恰好是我想禁用什么，所以这是我正在看的主要内容）。非常令人沮丧的是，这也没有以某种方式暴露出来。