fix(expansion-panel,menu,select): nested animations not working

Fixes issues with the expansion panel, menu and select animations where the child animations were being blocked by the parent ones.

**Note:** the menu animations needed a bit more refactoring since the old approach wasn't very idiomatic and made it harder to run the parallel animations.

Fixes #8814, #8953.

Author: crisbeto

src/lib/expansion/expansion-panel-header.ts

@@ -6,7 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {animate, state, style, transition, trigger} from '@angular/animations';
+import {
+  animate,
+  state,
+  style,
+  transition,
+  trigger,
+  query,
+  animateChild,
+  group,
+} from '@angular/animations';
 import {FocusMonitor} from '@angular/cdk/a11y';
 import {ENTER, SPACE} from '@angular/cdk/keycodes';
 import {filter} from 'rxjs/operators/filter';
@@ -76,7 +85,10 @@ import {EXPANSION_PANEL_ANIMATION_TIMING, MatExpansionPanel} from './expansion-p
       }), {
         params: {expandedHeight: '64px'}
       }),
-      transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING)),
+      transition('expanded <=> collapsed', group([
+        query('@indicatorRotate', animateChild(), {optional: true}),
+        animate(EXPANSION_PANEL_ANIMATION_TIMING),
+      ])),
     ]),
   ],
 })

src/lib/menu/menu-animations.ts

@@ -12,6 +12,9 @@ import{
   style,
   animate,
   transition,
+  query,
+  group,
+  sequence,
   AnimationTriggerMetadata,
 } from '@angular/animations';
 
@@ -39,24 +42,28 @@ export const transformMenu: AnimationTriggerMetadata = trigger('transformMenu',
     // as of 4.2, which causes the animation to be skipped if it starts from 0.
     transform: 'scale(0.01, 0.01)'
   })),
-  state('enter-start', style({
-    opacity: 1,
-    transform: 'scale(1, 0.5)'
-  })),
-  state('enter', style({
-    transform: 'scale(1, 1)'
-  })),
-  transition('void => enter-start', animate('100ms linear')),
-  transition('enter-start => enter', animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)')),
+  transition('void => enter', sequence([
+    query('.mat-menu-content', style({opacity: 0})),
+    animate('100ms linear', style({opacity: 1, transform: 'scale(1, 0.5)'})),
+    group([
+      query('.mat-menu-content', animate('400ms cubic-bezier(0.55, 0, 0.55, 0.2)',
+        style({opacity: 1})
+      )),
+      animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({transform: 'scale(1, 1)'})),
+    ])
+  ])),
   transition('* => void', animate('150ms 50ms linear', style({opacity: 0})))
 ]);
 
 
 /**
  * This animation fades in the background color and content of the menu panel
  * after its containing element is scaled in.
+ * @deprecated
  */
 export const fadeInItems: AnimationTriggerMetadata = trigger('fadeInItems', [
+  // TODO(crisbeto): this is inside the `transformMenu`
+  // now. Remove next time we do breaking changes.
   state('showing', style({opacity: 1})),
   transition('void => *', [
     style({opacity: 0}),

src/lib/menu/menu-directive.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AnimationEvent} from '@angular/animations';
 import {FocusKeyManager} from '@angular/cdk/a11y';
 import {Direction} from '@angular/cdk/bidi';
 import {ESCAPE, LEFT_ARROW, RIGHT_ARROW} from '@angular/cdk/keycodes';
@@ -30,6 +29,7 @@ import {
   ViewChild,
   ViewEncapsulation,
   NgZone,
+  OnInit,
 } from '@angular/core';
 import {Observable} from 'rxjs/Observable';
 import {merge} from 'rxjs/observable/merge';
@@ -79,7 +79,7 @@ const MAT_MENU_BASE_ELEVATION = 2;
   ],
   exportAs: 'matMenu'
 })
-export class MatMenu implements AfterContentInit, MatMenuPanel, OnDestroy {
+export class MatMenu implements OnInit, AfterContentInit, MatMenuPanel, OnDestroy {
   private _keyManager: FocusKeyManager<MatMenuItem>;
   private _xPosition: MenuPositionX = this._defaultOptions.xPosition;
   private _yPosition: MenuPositionY = this._defaultOptions.yPosition;
@@ -92,7 +92,7 @@ export class MatMenu implements AfterContentInit, MatMenuPanel, OnDestroy {
   _classList: {[key: string]: boolean} = {};
 
   /** Current state of the panel animation. */
-  _panelAnimationState: 'void' | 'enter-start' | 'enter' = 'void';
+  _panelAnimationState: 'void' | 'enter' = 'void';
 
   /** Parent menu of the current menu panel. */
   parentMenu: MatMenuPanel | undefined;
@@ -181,6 +181,10 @@ export class MatMenu implements AfterContentInit, MatMenuPanel, OnDestroy {
     private _ngZone: NgZone,
     @Inject(MAT_MENU_DEFAULT_OPTIONS) private _defaultOptions: MatMenuDefaultOptions) { }
 
+  ngOnInit() {
+    this.setPositionClasses();
+  }
+
   ngAfterContentInit() {
     this._keyManager = new FocusKeyManager<MatMenuItem>(this.items).withWrap().withTypeAhead();
     this._tabSubscription = this._keyManager.tabOut.subscribe(() => this.close.emit('keydown'));
@@ -273,21 +277,11 @@ export class MatMenu implements AfterContentInit, MatMenuPanel, OnDestroy {
     }
   }
 
-  /** Starts the enter animation. */
-  _startAnimation() {
-    this._panelAnimationState = 'enter-start';
-  }
-
-  /** Resets the panel animation to its initial state. */
-  _resetAnimation() {
-    this._panelAnimationState = 'void';
-  }
-
-  /** Callback that is invoked when the panel animation completes. */
-  _onAnimationDone(event: AnimationEvent) {
-    // After the initial expansion is done, trigger the second phase of the enter animation.
-    if (event.toState === 'enter-start') {
-      this._panelAnimationState = 'enter';
-    }
+  /**
+   * Toggles the animation state of the menu panel.
+   * @param isOpen Whether the menu should be open.
+   */
+  _toggleAnimation(isOpen: boolean) {
+    this._panelAnimationState = isOpen ? 'enter' : 'void';
   }
 }

src/lib/menu/menu-trigger.ts

@@ -197,7 +197,7 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
       this._initMenu();
 
       if (this.menu instanceof MatMenu) {
-        this.menu._startAnimation();
+        this.menu._toggleAnimation(true);
       }
     }
   }
@@ -220,7 +220,7 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
       this._overlayRef.detach();
 
       if (this.menu instanceof MatMenu) {
-        this.menu._resetAnimation();
+        this.menu._toggleAnimation(false);
       }
     }
   }

src/lib/menu/menu.html

@@ -5,10 +5,9 @@
     (keydown)="_handleKeydown($event)"
     (click)="closed.emit('click')"
     [@transformMenu]="_panelAnimationState"
-    (@transformMenu.done)="_onAnimationDone($event)"
     tabindex="-1"
     role="menu">
-    <div class="mat-menu-content" [@fadeInItems]="'showing'">
+    <div class="mat-menu-content">
       <ng-content></ng-content>
     </div>
   </div>

src/lib/select/select-animations.ts

@@ -13,6 +13,9 @@ import {
   style,
   transition,
   trigger,
+  query,
+  animateChild,
+  group,
 } from '@angular/animations';
 
 /**
@@ -42,14 +45,15 @@ export const transformPanel: AnimationTriggerMetadata = trigger('transformPanel'
     minWidth: 'calc(100% + 64px)', // 64px = 48px padding on the left + 16px padding on the right
     transform: 'scaleY(1)'
   })),
-  transition('void => *', [
+  transition('void => *', group([
+    query('@fadeInContent', animateChild()),
     style({
       opacity: 0,
       minWidth: '100%',
       transform: 'scaleY(0)'
     }),
     animate('150ms cubic-bezier(0.25, 0.8, 0.25, 1)')
-  ]),
+  ])),
   transition('* => void', [
     animate('250ms 100ms linear', style({opacity: 0}))
   ])