feat(MatMenu): option to open menu instantly

[bboehm86]

Feature request

The menu should (optionally) open without the animation (like stated in the Material Design Spec:
https://material.io/design/components/menus.html#behavior -> Motion Section)

What is the expected behavior?

Desktop menus have the option to open instantly

What is the current behavior?

Menu opens with (kinda slow) animation.

What is the use-case or motivation for changing an existing behavior?

Alignment with the Material Design Spec and faster user interaction on Desktop Browsers

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

6.4.7

Is there anything else we should know?

[crisbeto]

In 7.0 the menu will have a much quicker animation that is in-line with the latest Material Design spec.

[bboehm86]

Thats good to hear but there would be no way for skipping the animation altogether just for the MatMenu?

[crisbeto]

You should be able to use the @.disabled binding which lets you disable animations on a particular section of the DOM.

[bboehm86]

Well, sadly this seems to not work on the MatMenu. Not really sure why though...

Example:
https://stackblitz.com/edit/angular-material2-issue-ho3tjd

off topic: thanks for the quick responses on this! 😃

[josephperrott]

@devversion Can #12829/#12839 be expanded to include MatMenu in respecting @.disabled?

[devversion]

@josephperrott Actually @.disabled should work properly. I guess it's related to the fact that the menu overlay animates in the cdk-overlay-container which is most likely not a child of the @.disabled element.

We need to come with a better solution for such things. Unfortunately there is no easy way to detect the @.disabled state of an element because it's part of the custom animations renderer. But there might be possibilities. I will have another look.

[ChrisProlls]

Any news about it ? I need it too :)

[haovanvo]

I'm also looking for an option to disable animation for MatMenu only. It had terrible performance issue on MS Edge.

[devversion]

This looks related to #18340. As stated in my initial comment, we need to come up with a better solution for these overlay based components.

@crisbeto sent a proposal for dialog to allow configuration of enter and exit duration. That might could work for the bottom-sheet and menu too. I'm hoping we can find a consistent solution that works for all overlay-based components.

[ADH-LukeBollam]

We would also appreciate this option. Users are spending more time waiting for the menu to appear than making a selection.

[jpike88]

we're considering using another menu library because the animation feels too toy-like and distracting, and doesn't suit a more mature, enterprise audience.

^ this is just my opinion of course. but there should be a way to turn it off

[cport1]

use the cdk connected overlay

[jaykhatri2020]

To disable the animation in the mat menu, add the following CSS.

.ng-animating, .ng-trigger-transformMenu{
    animation: none !important;
    transition: none !important;
    transform-origin: center center !important;
    animation-duration: 0s !important;
    transform:  none !important;
    opacity: 1 !important;
    pointer-events: all !important;
}

Please note: this will affect all components.