如何修改Angular Material中MatMenu的动画效果？

问题说明 #

尝试通过@Directive修改MatMenu的动画效果，参考Angular Material源码路径./node_modules/@angular/material/esm2022/menu/menu-animations.mjs后，写出以下代码：

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 }))),
  ]);
}

但直接修改this.menu['decorators'][0].args[0].animations[0]的写法无法生效。

可行解决方案 #

无需直接操作组件内部私有装饰器属性，通过自定义动画触发器+指令覆盖的方式实现：

1. 定义自定义动画触发器 #

在指令文件中导入动画模块，编写自定义动画逻辑：

import { trigger, state, style, animate, transition } from '@angular/animations';

const customMenuAnimation = 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 linear', style({ opacity: 0 }))
  ])
]);

2. 编写自定义指令 #

通过指令定位mat-menu元素，用Renderer2修改动画绑定并关联自定义动画：

import { Directive, ElementRef, Renderer2, AfterViewInit } from '@angular/core';
import { MatMenu } from '@angular/material/menu';

@Directive({
  selector: '[appCustomMenuAnimation]'
})
export class CustomMenuAnimationDirective implements AfterViewInit {
  constructor(
    private el: ElementRef,
    private renderer: Renderer2,
    private menu: MatMenu
  ) {}

  ngAfterViewInit(): void {
    // 移除原有动画绑定
    this.renderer.removeAttribute(this.el.nativeElement, '@transformMenu');
    // 添加自定义动画绑定
    this.renderer.setAttribute(this.el.nativeElement, '@transformMenu', '');
    // 将自定义动画加入菜单组件的动画列表
    if (!this.menu.animations.includes(customMenuAnimation)) {
      this.menu.animations.push(customMenuAnimation);
    }
  }
}

3. 模块配置 #

确保模块导入BrowserAnimationsModule并声明自定义指令：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CustomMenuAnimationDirective } from './path-to-your-directive';

@NgModule({
  imports: [BrowserAnimationsModule],
  declarations: [CustomMenuAnimationDirective]
})
export class YourFeatureModule {}

4. 模板使用 #

在目标mat-menu元素上添加自定义指令属性：

<button mat-button [matMenuTriggerFor]="customMenu">打开菜单</button>
<mat-menu #customMenu="matMenu" appCustomMenuAnimation>
  <button mat-menu-item>选项1</button>
  <button mat-menu-item>选项2</button>
</mat-menu>

这种方式通过Angular官方API修改动画绑定，避免了私有属性访问的兼容性问题，能稳定实现自定义动画效果。

内容的提问来源于stack exchange，提问作者jay khatri