fix(multiple): don't block child component animations on open (#24529)

Reworks several components that usually contain projected content not to block animations within that content. This prevents things like expansion panels from appearing as open. These changes are identical to #13888 which had to be reverted in the past. Fixes #13870.
angular · Mar 6, 2022 · 5edcc68 · 5edcc68
1 parent 2aaa9d4
commit 5edcc68
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 7 deletions.
diff --git 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,
+  animateChild,
+  AnimationEvent,
+  group,
+  query,
+  state,
+  style,
+  transition,
+  trigger,
+} from '@angular/animations';
 import {FocusTrapFactory, InteractivityChecker} from '@angular/cdk/a11y';
 import {_getFocusedElementPierceShadowDom} from '@angular/cdk/platform';
 import {
@@ -55,8 +65,20 @@ export function throwDialogContentAlreadyAttachedError() {
     trigger('dialog', [
       state('enter', style({opacity: 1})),
       state('exit, void', style({opacity: 0})),
-      transition('* => enter', animate('{{enterAnimationDuration}}')),
-      transition('* => exit, * => void', animate('{{exitAnimationDuration}}')),
+      transition(
+        '* => enter',
+        group([
+          animate('{{enterAnimationDuration}}'),
+          query('@*', animateChild(), {optional: true}),
+        ]),
+      ),
+      transition(
+        '* => exit, * => void',
+        group([
+          animate('{{exitAnimationDuration}}'),
+          query('@*', animateChild(), {optional: true}),
+        ]),
+      ),
     ]),
   ],
   host: {

diff --git a/src/material/bottom-sheet/bottom-sheet-animations.ts b/src/material/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,11 +28,17 @@ export const matBottomSheetAnimations: {
     state('visible', style({transform: 'translateY(0%)'})),
     transition(
       'visible => void, visible => hidden',
-      animate(`${AnimationDurations.COMPLEX} ${AnimationCurves.ACCELERATION_CURVE}`),
+      group([
+        animate(`${AnimationDurations.COMPLEX} ${AnimationCurves.ACCELERATION_CURVE}`),
+        query('@*', animateChild(), {optional: true}),
+      ]),
     ),
     transition(
       'void => visible',
-      animate(`${AnimationDurations.EXITING} ${AnimationCurves.DECELERATION_CURVE}`),
+      group([
+        animate(`${AnimationDurations.EXITING} ${AnimationCurves.DECELERATION_CURVE}`),
+        query('@*', animateChild(), {optional: true}),
+      ]),
     ),
   ]),
 };
diff --git a/src/material/dialog/dialog-animations.ts b/src/material/dialog/dialog-animations.ts
@@ -12,6 +12,9 @@ import {
   transition,
   trigger,
   AnimationTriggerMetadata,
+  query,
+  animateChild,
+  group,
 } from '@angular/animations';
 
 /**
@@ -30,11 +33,17 @@ export const matDialogAnimations: {
     state('enter', style({transform: 'none'})),
     transition(
       '* => enter',
-      animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({transform: 'none', opacity: 1})),
+      group([
+        animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({transform: 'none', opacity: 1})),
+        query('@*', animateChild(), {optional: true}),
+      ]),
     ),
     transition(
       '* => void, * => exit',
-      animate('75ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({opacity: 0})),
+      group([
+        animate('75ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({opacity: 0})),
+        query('@*', animateChild(), {optional: true}),
+      ]),
     ),
   ]),
 };