Question

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

试图覆盖转换，但没有帮助。让我知道您将如何覆盖它。

PS：如果无法实现，请让我知道要用于样式定制的其他轻量级扩展面板（手风琴）。

Answer 1

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

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

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

Answer 2

根据 Material-UI documentation ，您可以通过在主题中提供以下内容来禁用组件的所有过渡：

import { createMuiTheme } from '@material-ui/core';

const theme = createMuiTheme({
  transitions: {
    // So we have `transition: none;` everywhere
    create: () => 'none',
  },
});

然后，您应使用 <MuiThemeProvider theme={theme}> 包装组件，如下所示：

export default function SimpleExpansionPanel() {
  return (
    <MuiThemeProvider theme={theme}>
      <div>
        <ExpansionPanel>
          <ExpansionPanelSummary
            expandIcon={<ExpandMoreIcon />}
            aria-controls="panel1a-content"
            id="panel1a-header"
          >
            <Typography>Expansion Panel 1</Typography>
          </ExpansionPanelSummary>
          <ExpansionPanelDetails>
            <Typography>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Suspendisse malesuada lacus ex, sit amet blandit leo lobortis
              eget.
            </Typography>
          </ExpansionPanelDetails>
        </ExpansionPanel>
      </div>
    </MuiThemeProvider>
  );
}

您可以找到一个工作代码示例 here。

Answer 3

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

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

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

有没有一种方法可以禁用Material UI扩展面板的动画？

3 个答案: