fix(menu): improve menu open animation

[m98]

Description

The current open animation behavior for the menus does not look like to follow the Material spec, and it's not elegant. (Material.io video demo).

The menu seems to be somehow broken with the first look, because first you will get an empty (transparent) container which has shadow border, then the content appears inside the container.

You will see slow motion demos in bellow:

The current behavior of the menu open animation:

The new open animation behavior (after the change):

Side by side view:

What Changed?

The menu container did not have any background color, and instead of that the content of the menu (mat-menu-content) had a white background color, and as far as I know, we don't have any rules in the Material spec that the menu should be transparent until its content appeared.
There is also no need to set the background color for the content of the menu since by this change, we will see just the parent background color.

Other Material Design Menus

Material Design Lite
AngularJS Material
Material guidelines demos

[crisbeto]

The menu animation was changed in #5361. It currently looks like this in master:

[m98]

Thank you @crisbeto
I fetched the latest pushes before I work on this change, but the menu was working like before!
Do you know why I did not get latest changes? (Like your PR changed the behavior of the menu, but I still was getting the previous animation behavior)

Your change made the menu much nicer. Thanks 👍

Update:
I updated my local repository before your PR merge!

[fxck]

There already was a PR for this #3941

[m98]

As already discussed, there already was a PR for this #3941

[angular-automatic-lock-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.}