如何让Angular mat-menu-panel完成CSS变换后再显示

方案1：CSS初始隐藏+过渡动画消除闪现 #

将样式放到全局样式文件（styles.css）中，确保菜单渲染时样式已生效，同时通过初始隐藏和过渡效果避免闪现：

.cdk-overlay-pane .mat-menu-panel {
  transform: scale(0.8);
  transform-origin: top left;
  /* 初始隐藏原尺寸菜单 */
  opacity: 0;
  visibility: hidden;
  /* 添加过渡让显示更自然 */
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* 菜单激活时触发显示 */
.cdk-overlay-pane .mat-menu-panel.mat-menu-panel-visible {
  opacity: 1;
  visibility: visible;
}

如果是组件内样式，需添加::ng-deep确保样式穿透（Angular官方不推荐，但可临时解决样式隔离问题）：

::ng-deep .cdk-overlay-pane .mat-menu-panel {
  transform: scale(0.8);
  transform-origin: top left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

::ng-deep .cdk-overlay-pane .mat-menu-panel.mat-menu-panel-visible {
  opacity: 1;
  visibility: visible;
}

方案2：直接定义菜单基础尺寸（替代transform） #

如果菜单内容固定，可直接设置宽高为默认尺寸的80%，彻底避免transform导致的闪现：

.cdk-overlay-pane .mat-menu-panel {
  width: 80%;
  max-width: calc(280px * 0.8); /* 假设默认max-width为280px，按比例调整 */
  transform-origin: top left;
}

方案3：利用Angular动画控制菜单显示 #

通过组件动画从缩放0过渡到0.8，全程控制菜单显示状态：

1. 组件类中导入动画模块并定义动画：

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

@Component({
  // ...其他组件元数据
  animations: [
    trigger('menuScale', [
      state('hidden', style({
        transform: 'scale(0)',
        opacity: 0,
        visibility: 'hidden'
      })),
      state('visible', style({
        transform: 'scale(0.8)',
        opacity: 1,
        visibility: 'visible'
      })),
      transition('hidden => visible', animate('150ms ease-out'))
    ])
  ]
})

2. 模板中绑定动画状态并注入菜单触发器：

<button [matMenuTriggerFor]="menu">右键菜单触发按钮</button>
<mat-menu #menu="matMenu" [@menuScale]="menuTrigger.menuOpen ? 'visible' : 'hidden'">
  <button mat-menu-item>菜单项1</button>
  <button mat-menu-item>菜单项2</button>
</mat-menu>

import { MatMenuTrigger } from '@angular/material/menu';
import { ViewChild } from '@angular/core';

@Component({/*...*/})
export class YourComponent {
  @ViewChild(MatMenuTrigger) menuTrigger!: MatMenuTrigger;
}

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