How to prevent display of Angular mat-menu-panel until after completion of CSS transform

JRS 0
Viewed 24

Working on an Angular 14 application, I want all context menu pop-ups to be only 80% of their size, as the default size is too large and clunky in the context of the data presented in the application. This is working fine to accomplish this:

.cdk-overlay-pane .mat-menu-panel {
  transform: scale(0.8);
  transform-origin: top left;
}

However, the problem is that the context menu appears at full size for a moment, and then the transform takes effect and it "snaps" to the desired size. I don't want it to appear until the transform is complete. Anybody know how to accomplish this?

css angular
1 Answers

I was able to do this by defaulting mat-menu-panel to visibility: hidden, then showing it a fraction of a second after the menu is opened. (I don't like using javascript like this within the context of an Angular app, but I don't know any other way.)

Default CSS:

.mat-menu-panel {
  visibility:hidden;
}

Showing after menu is opened:

public onContextMenu(event: MouseEvent, item: any) {
    event.preventDefault();
    this.contextMenuPosition.x = event.clientX + 'px';
    this.contextMenuPosition.y = event.clientY + 'px';
    this.matMenuTrigger.menuData = { 'item': item };
    this.matMenuTrigger.menuOpened.subscribe(() => {
      setTimeout(() => {
        const overlayPanes = document.getElementsByClassName('mat-menu-panel') as HTMLCollectionOf<HTMLElement>;
        Array.from(overlayPanes).forEach((el) => {
          el.style.visibility = 'visible';
        });
      }, 200);
    });
    this.matMenuTrigger.openMenu();    
  }
JRS0
Related