bug: cdk-overlay-dark-backdrop is removed before overlay is able to transition out

Bug, feature request, or proposal:

I’m considering this a bug since the default behavior in MdDialog is broken. Currently the overlay detaches once the transition caused by removing cdk-overlay-backdrop-showing has ended. However, the cdk-overlay-dark-backdrop class added by default is also removed before the transition occurs.

What is the expected behavior?

The overlay should smoothly transition the backdrop out.

What is the current behavior?

Notice how there’s no fade out in the demo: https://material.angular.io/components/dialog/overview

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Latest

Is there anything else we should know?

I’m assuming the removal of custom classes early is intentional so that custom transitions can be defined on the backdrop. The easiest change that is mostly non breaking is to change .cdk-overlay-backdrop to have transition-props: all. However that isn’t completely accurate and isn’t configurable.

My preference is that the backdropClass specified in the overlay config are always applied up until the dialog is detached, and while the dialog is shown, ${this._state.backdropClass}-showing is toggled on. This allows for full customization of the backdrop before and after the transition.

[crisbeto]

@thinkingmedia there’s https://github.com/angular/material2/pull/10145 which solves the issue.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}