Q: How to fade in/out bottom sheet on open/close?

[nikos]

Thanks for sharing this very helpful component. Since I am not an CSS expert at all, I am wondering how can I achieve that on opening a bottom sheet that it can fade in?

In the optimal case it would open from the very bottom, although I didn't find any specific behaviour advises in https://material.io/guidelines/components/bottom-sheets.html#bottom-sheets-modal-bottom-sheets). Any advise on this topic would be very much appreciated.

[nikos]

It looks with the current implementation the open prop is "simply" setting the CSS opacity to 0 resp. 1, which would not allow to modify height, might be that I am wrong... ?

Anyways, here is an example, which demonstrates the bottom up fade in: https://jsfiddle.net/vnxy0j0L/2/

[saschb2b]

You want it to slide up correct? Angular has a implementation like this https://material.angularjs.org/latest/demo/bottomSheet Just for completion I attach the mui specs https://material.io/guidelines/components/bottom-sheets.html#bottom-sheets-specs

We have this component in production under https://lift.fail/ (when viewed on a small screen like a phone) and I'll update it tomorrow. Needs some fresh air anyway. I'll come up with something nice and will post some results

[nikos]

Hi Sascha, thanks a lot for keeping track of my question / feature request ;) ... and yes, its the "slide up" I am trying to implement with the help of your component (actually for the same use case like with lift.fail, only to slide up with animation say 0,5-1 sec to make showing the info details a bit more smoother). Looking forward to your follow-up.

[saschb2b]

Soo I did some transition for the height attribute. Test it under the new demosite https://teamwertarbyte.github.io/material-ui-bottom-sheet/

[nikos]

Perfect, thanks a lot, the height transition looks really smooth.