Bottom Sheet animates closed too quickly

[pangolingo]

Expected Behavior

A bottom sheet should close at exactly the speed specified in the "outDuration" option. But it closes much faster.

Codepen demo:
https://codepen.io/pangolingo/pen/abObYGx

Current Behavior

When a Bottom Sheet animates out, it does not animate at the speed specified in the options. The speed depends on how tall the page is.

Possible Solution

We're animating the "bottom" attribute to 100%, so the modal will go further off the screen as the page grows taller. Maybe we could fix it by instead animating the "top" attribute. Or even better, use a CSS transform. In fact I was a bit surprised that CSS transforms aren't used for animation already, since they're likely to be smoother.

Using CSS transforms, I think we could position the Bottom sheet with bottom: 100%; and animate it out with transform: translateY(100%);

Steps to Reproduce (for bugs)

1. Implement a bottom sheet (see CodePen demo)
2. Set the "outDuration" option to at least a few seconds to easily observe. Set the "inDuration" to the same duration to compare.
3. Open the bottom sheet, then close it
4. Observe that the "out" animation speed doesn't match the "in" duration speed

Context

It feels weird when the bottom sheet doesn't animate in and out at the same speed.

Your Environment

• Version used: 1.0.0-rc.2
• Browser Name and version: Firefox, Android Chrome
• Operating System and version (desktop or mobile): Mac OSX, Android 8

[raxraj]

Well !,
I get the issue behind it.
What is happening here is that the bottom sheet container is set to go out quicker than the animation itself. This makes the bg dark effect stay for longer but the sheet gets out faster.