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

This reverts commit 235add9.

This change broke an app inside of Google where tabs appear inside of a
dialog. The tabs get stuck in a weird frozen animation state.

Author: jelbourn

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

@@ -6,17 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {
-  animate,
-  AnimationEvent,
-  state,
-  style,
-  transition,
-  trigger,
-  group,
-  query,
-  animateChild,
-} from '@angular/animations';
+import {animate, AnimationEvent, state, style, transition, trigger} from '@angular/animations';
 import {FocusTrapFactory} from '@angular/cdk/a11y';
 import {
   BasePortalOutlet,
@@ -64,13 +54,9 @@ export function throwDialogContentAlreadyAttachedError() {
   changeDetection: ChangeDetectionStrategy.Default,
   animations: [
     trigger('dialog', [
-      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),
-      ])),
+      state('enter', style({ opacity: 1 })),
+      state('exit, void', style({ opacity: 0 })),
+      transition('* => *', animate(225)),
     ])
   ],
   host: {

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

@@ -12,9 +12,6 @@ import {
   transition,
   trigger,
   AnimationTriggerMetadata,
-  group,
-  query,
-  animateChild,
 } from '@angular/animations';
 import {AnimationCurves, AnimationDurations} from '@angular/material/core';
 
@@ -28,10 +25,7 @@ export const matBottomSheetAnimations: {
     state('visible', style({transform: 'translateY(0%)'})),
     transition('visible => void, visible => hidden',
         animate(`${AnimationDurations.COMPLEX} ${AnimationCurves.ACCELERATION_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}`),
-    ]))
+    transition('void => visible',
+        animate(`${AnimationDurations.EXITING} ${AnimationCurves.DECELERATION_CURVE}`)),
   ])
 };

src/lib/dialog/dialog-animations.ts

@@ -12,9 +12,6 @@ import {
   transition,
   trigger,
   AnimationTriggerMetadata,
-  query,
-  animateChild,
-  group,
 } from '@angular/animations';
 
 const animationBody = [
@@ -23,13 +20,10 @@ 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', 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('* => enter', 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}))),
 ];
 
 /**