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

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 angular#13888 which had to be reverted in the past. Fixes angular#13870.
crisbeto · Mar 6, 2022 · 2cc2083 · 2cc2083
1 parent e89bce8
commit 2cc2083
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 9 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}),
+      ]),
     ),
   ]),
 };
diff --git a/src/material/sidenav/drawer-animations.ts b/src/material/sidenav/drawer-animations.ts
@@ -12,6 +12,9 @@ import {
   transition,
   trigger,
   AnimationTriggerMetadata,
+  group,
+  query,
+  animateChild,
 } from '@angular/animations';
 
 /**
@@ -42,10 +45,16 @@ export const matDrawerAnimations: {
         'visibility': 'hidden',
       }),
     ),
-    transition('void => open-instant', animate('0ms')),
+    transition(
+      'void => open-instant',
+      group([animate('0ms'), query('@*', animateChild(), {optional: true})]),
+    ),
     transition(
       'void <=> open, open-instant => void',
-      animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)'),
+      group([
+        animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)'),
+        query('@*', animateChild(), {optional: true}),
+      ]),
     ),
   ]),
 };