Is there a way to use Material-UI Collapse and Drawer without Transition?
I'm using Collapse and Drawer from material-ui v1 beta to create navigation on mobile website. The navigation has many nested lists.
When I click to expand/collapse a Collapse, there is noticeable delay until the Collapse start to animate. The same problem also occur on the Drawer.
Both Collapse and Drawer use Transition for animation. Transition is provided by react-transition-group.
To improve responsiveness, I plan to use Collapse and Drawer without Transition (I don't mind having no animation). Is there a way to use Collapse and Drawer without Transition?
P.S. I've checked Collapse's and Drawer's documentation and don't find prop or flag to disable Transition.
Answer
Drawer exposes a transitionDuration prop:
The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
Setting this to zero eliminates the effect of the transition:
<Drawer transitionDuration={0} ...>
Collapse offers a timeout prop with a similar description:
The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. Set to 'auto' to automatically calculate transition time based on height.
Similarly, setting this to zero eliminates the effect. This codesandbox is a modification of the material-ui Nested List demo.
Keep in mind that Collapse is merely a wrapper for an element that uses a Grow transition. If you don't want the animation to occur, you can conditionally render the items based on state. See this other codesandbox for an example.