Is there a way to disable Material UI expansion panel's animation?

Question

I want to disable the animation of Material UI expansion panel in React. How can I disable all the animations applied to the expansion panel?

Tried overwriting the transitions but it didn't help. Let me know how you would overwrite that.

PS: If that is not possible let me know any other light weight expansion panel (accordion) to use with styling customization.

Profant

Almost everything in MD CSS is marked as '!important'. I would try to overwrite the css that does this marking your overwrite as '!important' as well, so that it cascades over it properly. – Berlin

@Berlin Material-UI (the React component library referenced in the question -- not Material Design) has almost no uses of "!important" in its styling. – Somatotype

@ShahLav ExpansionPanel unconditionally uses the Collapse transition. What kind of styling customization are you trying to make? – Somatotype

Answer 1

Yes. You can do this by manipulating the TransitionProps prop, as such:

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

The timeout: 0 prop can be discovered by looking at the Collapse API, which is the default TransitionComponent of ExpansionPanel: https://material-ui.com/api/collapse/

Inadvertency

This seems to have no effect when I put it in my tag. The transition animation is still there. – Musette

Actually, looking at this further, I see that this setting does affect the actual collapse/expand transition itself, however there seems to be no way to get at the transition on the expandIcon (which happens to be what I wanted to disable, so it's the main thing I was looking at). Very frustrating that this isn't exposed somehow too. – Musette

In my case (the Accordion component), doing this combined with @pukarcho 's suggestion of disableGutters={true} worked. – Nutgall

Answer 2

This works for me

<Accordion disableGutters={true}>

Executor

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Discontinuation

Answer 3

I used the following css to disable the Animation on Material-UI Accordion:

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

You can probably also apply it on the Expansion Panel collapsing div

Perfusion

Answer 4

This is an old question but you can override the css for the expand icon and change the transform property to rotate(0deg) to disable the animation on the icon.

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

More details on customization can be found here

Sair

Answer 5

If anyone else is having trouble with the MUI Expansion Panel or Accordion component expansion animation, this will cause it to simply open and close in a reasonable amount of time.

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

Queridas

Answer 6

Here is an updated answer for MUI version 5. The ExpanionPanel component has been replaced with the Accordion.

<Accordion
  disableGutters
  slotProps={{
    transition: { timeout: 0 },
  }}
>

Inflow