fix(expansion-panel,menu,select): nested animations not working

[crisbeto]

Fixes issues with the expansion panel, menu and select animations where the child animations were being blocked by the parent ones.

Note: the menu animations needed a bit more refactoring since the old approach wasn't very idiomatic and made it harder to run the parallel animations.

Fixes #8814.
Fixes #8953.

[crisbeto]

Caretaker note: this includes the changes from #8371 (with some modifications) which had sync issues.

[jelbourn]

LGTM

[jelbourn]

@crisbeto would you be able to change the PR to avoid renaming any of the internal methods on menu (the animation ones specifically)? One team in Google forked menu-trigger, so they were left with calls to the internal menu methods. They're going to work on changing that, but in the meantime avoiding any changes would unblock this PR.

[crisbeto]

I've put back the old animation methods @jelbourn.

[andrewseguin]

For some reason, this causes issues internally for tests because they can no longer click menu items as soon as they appear on the page.

The reason for this is due to the pointer-events rules in the styles. To resolve this, we can reduce our test failures by making this style only affect the intended menu items (ones that open nested menus).

The fix is to add the selector .mat-menu-item-submenu-trigger to the CSS rule:

&.ng-animating .mat-menu-item-submenu-trigger {
  pointer-events: none;
}

[crisbeto]

Done @andrewseguin.

[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.}