4

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.

Indra
  • 78
  • 1
  • 1
  • 6

2 Answers2

3

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.

Ken Gregory
  • 7,180
  • 1
  • 39
  • 43
  • 2
    Setting `timeout` eliminates the Transition effect on the Collapse but doesn't improve its performance. Problem I mentioned in the question ("there is noticeable delay until the Collapse start to animate") still occur. – Indra Feb 23 '18 at 12:38
  • 1
    The Collapse component itself is a wrapper for an element with that transition though. You don't have to use it. You can conditionally render subitems based on state if you don't want the animation to occur. – Ken Gregory Feb 23 '18 at 14:04
  • Ah yes you are right. I don't need to use Collapse in my use case. But how about Drawer? – Indra Feb 26 '18 at 04:47
  • Drawer uses Slide which doesn’t seem to be hampered with this issue. I think the issues with Collapse might be due to its support of an `auto` timeout. – Ken Gregory Feb 26 '18 at 12:51
  • I see. So my issues with Collapse and Drawer actually are two separated problem. I still have the same problem with the Drawer though. When I clicked button to display the navigation (which use Drawer), there is noticeable delay until the Drawer start to slide in. I plan to remove Slide from the Drawer to improve performance. Is it possible? Or maybe there is another way? – Indra Feb 27 '18 at 06:23
  • @KenGregory, what if you're using a component that enforces a transition by default, such as Menu. How does one get rid of it completely, besides setting the time to 0. – V. Rubinetti Dec 08 '18 at 02:11
  • @V.Rubinetti With a `Menu`, all other props are passed onto `Popover`, which accepts a `TransitionComponent` – Ken Gregory Dec 08 '18 at 02:26
  • @KenGregory Yes but I cannot find any documentation saying how to specify a "null" (or equivalent) `TransitionComponent` – V. Rubinetti Dec 08 '18 at 03:31
  • @V.Rubinetti There is no way to eliminate the use of a Transition at the moment, so you can either create your own Transition component with a 0 timeout, set a 0 timeout, or create your own fork of mui to eliminate transitions from the components. – Ken Gregory Dec 10 '18 at 15:19
1

I had a similar issue of rendering virtualized list of material-ui <Card /> with <Collapse /> panel for accordion effect.

The issue lies with <Collapse /> transitioning behavior. Even if one sets its timeout property to 0 in a hope for no delay, it still induces a delay which causes it to finish rendering even after componentDidMount lifecycle. Same goes for <Drawer /> transitionDuration prop.

Solution

Simply remove the <Collapse /> and <Drawer /> components altogether. Just use a state to toggle the underline child component (let say <List />) style display.

But if really want the animation effect to include, then use react-virtuoso instead of react-window

Waleed93
  • 1,130
  • 2
  • 15
  • 24