[Slide] Slide animation overflows body for direction set to "left" or "up"

[Micgaw]

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Slide animation should not overflow body.

Current Behavior 😯

Slide animation overflows body when direction is set to left or up.

Steps to Reproduce 🕹

I reproduce it on your own demo for slide animation. All you have to do is open link below, change direction to left or up and you can see scrollbar for a fraction of a sec. If you increase timeout it will be more visible.

Link:

1. https://codesandbox.io/s/rr31x0pv6o?module=%2Fdemo.js

[eps1lon]

It's also permanent if you don't unmount on exit.

[mbrookes]

@Micgaw Looks like we need overflow: 'hidden', on the wrapper. Do you want to add it?

[Micgaw]

@mbrookes Sure, I can do it

[HugoGresse]

the issue is sadly not been fix :/

[lucas-barros]

Anyone has a temporary fix for this issue?

[pradeepa1997]

can i set two transition directions when the slide will appear and disappear .
Ex:It will come from left side and It will disappear in right side.

[maxikuehn]

Anyone has a temporary fix for this issue?

An easy fix would be to wrap the Transition Component in a div and prevent the overflow like this:

<div style={{ overflow: 'hidden' }}>
   <Slide in={open} direction="left" mountOnEnter unmountOnExit>
      ...
   </Slide>
</div>

this way the transition stays inside the div and no scrollbars will appear.

[oliviertassinari]

@kuehnbleiben Great, let's encourage this solution #13701 (comment) :)