bug(MatMenu): Cannot disable animations

[MursalovAltun]

Reproduction

Stackblitz repro

Expected Behavior

Menu animations to be disabled

Actual Behavior

Animations are remain

Environment

• Angular: 11
• CDK/Material: 11
• Browser(s): Google Chrome Version 88.0.4324.96 (Official Build) (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Xubuntu

[crisbeto]

I suspect that this might be an issue with the @angular/animations module since nothing has fundamentally changed in the menu in a long time.

[crisbeto]

I spent a bit of time looking into it, but couldn't find anything specific. One workaround is to define our own Input called @.disabled which then proxies to the inner element, but the problem is that won't pick up any @.disabled bindings on parent elements.

[MursalovAltun]

I suspect that this might be an issue with the @angular/animations module since nothing has fundamentally changed in the menu in a long time.

I extended the repro stackblitz project with a custom component that have a simple animation which I can disable in parent component using [@.disabled]=true so it seems related more to material components

[crisbeto]

Did this used to work with mat-menu on an earlier version on Material?

[MursalovAltun]

Did this used to work with mat-menu on an earlier version on Material?

This is not worked on previous versions too
There's a PR which seems like fixes the issue for some components but menu
Also, support for this feature is requested long ago 13017

[MursalovAltun]

I'm absolutely sure that this ticket soon will closed due to inactivity. Therefore I'm gonna close this right now to not disturb our lovely bot that closes issues no one cares about :)
So funny that simplest things like overriding animations of a component isn't possible and it takes about 5 years to implement them (see 8857).
Well done!

[crisbeto]

The bot only locks issues that have been closed and haven't had any activity in more than 30 days. For what it's worth, I think that this is a valid issue, but I can't guarantee when it'll be resolved since our team has its own set of commitments.

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

[am-castro]

Add class on your mat-menu tag, for example:

<mat-menu class="searchMenu" #searchMenu>

And add class on your css file

.searchMenu.ng-animating,
.searchMenu.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;
}

Thanks to @jaykhatri2020 to comment stylesheet

[crisbeto]

Covered by #20781.

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