How to change animation of MatMenu?

Question

I am trying to change the animation of MatMenu and here, I am Sharing my research before asking.

using @Directive :

ngAfterViewInit(): void {
           this.menu['decorators'][0].args[0].animations[0] = trigger('transformMenu', [
             state('void', style({
                 opacity: 0,
                 transform: 'scale(0.8)',
             })),
             transition('void => enter', animate('0ms cubic-bezier(0, 0, 0.2, 1)', style({
                 opacity: 1,
                 transform: 'scale(1)',
             }))),
            transition('* => void', animate('0ms 0ms linear', style({ opacity: 0 }))),
         ]);
}

ref : ./node_modules/@angular/material/esm2022/menu/menu-animations.mjs

But i am not getting this.menu['decorators'][0].args[0].animations[0]

work around: https://stackblitz.com/edit/angular-material-mat-menu-zenp65

Answer 1

finally, I found the solution after long research and minor CSS changes.

Just add:-

.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 CSS affect to all component.