From 235add9401eb54715289c768097a12b04295ed90 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Sat, 3 Nov 2018 01:27:01 +0100
Subject: [PATCH] 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.
---
 .../dialog/dialog-container.ts                | 22 +++++++++++++++----
 .../bottom-sheet/bottom-sheet-animations.ts   | 10 +++++++--
 src/lib/dialog/dialog-animations.ts           | 12 +++++++---
 3 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/src/cdk-experimental/dialog/dialog-container.ts b/src/cdk-experimental/dialog/dialog-container.ts
index 88e5ffa5094..04b695ede8e 100644
--- a/src/cdk-experimental/dialog/dialog-container.ts
+++ b/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: {
diff --git a/src/lib/bottom-sheet/bottom-sheet-animations.ts b/src/lib/bottom-sheet/bottom-sheet-animations.ts
index 102283d3167..6f189140f33 100644
--- a/src/lib/bottom-sheet/bottom-sheet-animations.ts
+++ b/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}`),
+    ]))
   ])
 };
diff --git a/src/lib/dialog/dialog-animations.ts b/src/lib/dialog/dialog-animations.ts
index 105b65c51fd..37de050d01e 100644
--- a/src/lib/dialog/dialog-animations.ts
+++ b/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}))),
 ];
 
 /**