【问题标题】: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 转换。您要进行哪种样式自定义?

标签: reactjs material-design material-ui mui


【解决方案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 上进行转换(恰好是我想禁用什么,所以这是我正在看的主要内容)。非常令人沮丧的是,这也没有以某种方式暴露出来。
      猜你喜欢
      • 2020-08-09
      • 2019-03-17
      • 1970-01-01
      • 2019-10-14
      • 1970-01-01
      • 1970-01-01
      • 2014-10-22
      • 2018-08-23
      • 1970-01-01
      相关资源
      最近更新 更多