From 6fa7c18bde0c01764d9ececddc6bb1f1147c5d35 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Tue, 30 Oct 2018 22:19:00 +0100
Subject: [PATCH] fix(dialog,bottom-sheet): enter animation blocking child
 animations

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 88e5ffa5094c..04b695ede8e8 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 102283d31679..6f189140f330 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 105b65c51fd9..37de050d01eb 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}))),
 ];
 
 /**