Material-ui: [Drawer] Animation on Drawer on route change (next 1.17+)

[EugeneDraitsev]

Problem description

I have a problem with drawer animation after updating from 1.0.0-alpha.16 to 1.0.0-alpha.17. Also this issue reproduced on 1.0.0-alpha.19. When I change route in my application, I can see drawer animation every time. It can't be somehow disabled. Even with enterTransitionDuration={0} and leaveTransitionDuration={0} I can see blinking animation. I tried set transition: none to drawer and all drawer child, but it no helps. Probably you can help me fix this one. Also I attached animation examples:

1.16:

1.17:

1.17 with enterTransitionDuration={0} and leaveTransitionDuration={0} and transition: none
visible only in hd

Drawer in my code:

<Drawer
  className={s.drawer}
  classes={{ paper: s.drawerPaper }}
  enterTransitionDuration={0}
  leaveTransitionDuration={0}
  docked
  open={open}
  onRequestClose={this.handleClose}
>
  {this.getSidebarContent()}
</Drawer>

Versions

• Material-UI: 1.0.0-alpha.17 - 1.0.0-alpha.19
• React: 15.5.4
• Browser: All Browsers

[ArsenyYankovsky]

+1

[oliviertassinari]

Could you provide a reproduction example? I don't know what's going on here. I can't help without. You can use codesandbox.io or webpackbin.

[EugeneDraitsev]

@oliviertassinari , I created some POC demo
1.19 - https://www.webpackbin.com/bins/-KnEVSU6GGVgvrHY1pVH
1.16 - https://www.webpackbin.com/bins/-KnEfGc7JPwarhtfCUPT

In 1.17+ when location is changes animation always displayed. In this demos if you will use enterTransitionDuration={0} and leaveTransitionDuration={0}, you will not notice any difference. But on real application with correct configured universal router all works as on my gifs in 1st post.

[EugeneDraitsev]

@oliviertassinari , Also I create one more interesting demo:
https://codesandbox.io/s/gJM5XlYok
If you click on one and two several time you will see the bug with drawer animation. But (!) if you replace component <One /> with his code like on screen above and update the page - all will work as expected.
It's NOT reproduce on 1.16, and reproduced in 1.17+

[EugeneDraitsev]

Seems like I found hack for it. I set transform: none !important; for drawer's paper class and it works fine.

[oliviertassinari]

Nice, now I can reproduce the issue.

[oliviertassinari]

Solving this issue comes down to the following question. In which circumstances do we want to animate the Drawer at the mount? We need to find the right transitionAppear default value & customization option.

[ghost]

I think you can implement more simple solution. Something like disableAnimation property can solve this problem (instead of enterTransitionDuration={0} and leaveTransitionDuration={0}, because even with these properties you can see blinky animation.

[oliviertassinari]

That should be fixed with #7236 as I don't think we should animate the Drawer during the first mount. Also, the transition duration properties seem to work as expected, I haven't noticed a blink. I guess that's a different issue.

  <Drawer
      enterTransitionDuration={0}
      leaveTransitionDuration={0}
  />