fix(material/menu): animation issue when same menu is used for multip…

…le nested triggers (#29280)

If the same menu is passed to different triggers and the user moves quickly between the menus (e.g. in a nested menu), an empty menu panel can show up while the closed menu is animating away. This is because the content needs to be moved over to the new menu.

These changes hide the empty menu panel immediately using CSS to avoid the glichy behavior.

src/material/menu/menu.scss

@@ -56,6 +56,13 @@ mat-menu {
   //    `mouseenter` event by dispatching it on tap.
   &.ng-animating {
     pointer-events: none;
+
+    // If the same menu is assigned to multiple triggers and the user moves quickly between them
+    // (e.g. in a nested menu), the panel for the old menu may show up as empty while it's
+    // animating away. Hide such cases since they can look off to users.
+    &:has(.mat-mdc-menu-content:empty) {
+      display: none;
+    }
   }
 
   @include cdk.high-contrast(active, off) {