fix(dialog,bottom-sheet): enter animation blocking child animations (#13888)

Currently the enter animations for the Material dialog, CDK dialog and bottom sheet are set up to be blocking, which means that any components with an initial animation inside them will be blocked until they're done. These changes allow for the child animations to run in parallel.

Fixes #13870.

Author: crisbeto

src/cdk-experimental/dialog/dialog-container.ts

@@ -6,7 +6,17 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {animate, AnimationEvent, state, style, transition, trigger} from '@angular/animations';
+import {
+  animate,
+  AnimationEvent,
+  state,
+  style,
+  transition,
+  trigger,
+  group,
+  query,
+  animateChild,
+} from '@angular/animations';
 import {FocusTrapFactory} from '@angular/cdk/a11y';
 import {
   BasePortalOutlet,
@@ -54,9 +64,13 @@ export function throwDialogContentAlreadyAttachedError() {
   changeDetection: ChangeDetectionStrategy.Default,
   animations: [
     trigger('dialog', [
-      state('enter', style({ opacity: 1 })),
-      state('exit, void', style({ opacity: 0 })),
-      transition('* => *', animate(225)),
+      state('enter', style({opacity: 1})),
+      state('exit, void', style({opacity: 0})),
+      transition('* => *', group([
+        // `animateChild` allows for child component to animate at the same time. See #13870.
+        query('@*', animateChild(), {optional: true}),
+        animate(225),
+      ])),
     ])
   ],
   host: {

src/lib/bottom-sheet/bottom-sheet-animations.ts

@@ -12,6 +12,9 @@ import {
   transition,
   trigger,
   AnimationTriggerMetadata,
+  group,
+  query,
+  animateChild,
 } from '@angular/animations';
 import {AnimationCurves, AnimationDurations} from '@angular/material/core';
 
@@ -25,7 +28,10 @@ export const matBottomSheetAnimations: {
     state('visible', style({transform: 'translateY(0%)'})),
     transition('visible => void, visible => hidden',
         animate(`${AnimationDurations.COMPLEX} ${AnimationCurves.ACCELERATION_CURVE}`)),
-    transition('void => visible',
-        animate(`${AnimationDurations.EXITING} ${AnimationCurves.DECELERATION_CURVE}`)),
+    transition('void => visible', group([
+      // `animateChild` allows for child component to animate at the same time. See #13870.
+      query('@*', animateChild(), {optional: true}),
+      animate(`${AnimationDurations.EXITING} ${AnimationCurves.DECELERATION_CURVE}`),
+    ]))
   ])
 };

src/lib/dialog/dialog-animations.ts

@@ -12,6 +12,9 @@ import {
   transition,
   trigger,
   AnimationTriggerMetadata,
+  query,
+  animateChild,
+  group,
 } from '@angular/animations';
 
 const animationBody = [
@@ -20,10 +23,13 @@ const animationBody = [
   // decimate the animation performance. Leaving it as `none` solves both issues.
   state('void, exit', style({opacity: 0, transform: 'scale(0.7)'})),
   state('enter', style({transform: 'none'})),
-  transition('* => enter', animate('150ms cubic-bezier(0, 0, 0.2, 1)',
-      style({transform: 'none', opacity: 1}))),
+  transition('* => enter', group([
+    // `animateChild` allows for child component to animate at the same time. See #13870.
+    query('@*', animateChild(), {optional: true}),
+    animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({transform: 'none', opacity: 1})),
+  ])),
   transition('* => void, * => exit',
-      animate('75ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({opacity: 0}))),
+    animate('75ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({opacity: 0}))),
 ];
 
 /**