diff --git a/src/cdk-experimental/dialog/dialog-container.ts b/src/cdk-experimental/dialog/dialog-container.ts index 04b695ede8e8..88e5ffa5094c 100644 --- a/src/cdk-experimental/dialog/dialog-container.ts +++ b/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: { diff --git a/src/lib/bottom-sheet/bottom-sheet-animations.ts b/src/lib/bottom-sheet/bottom-sheet-animations.ts index 6f189140f330..102283d31679 100644 --- a/src/lib/bottom-sheet/bottom-sheet-animations.ts +++ b/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}`)), ]) }; diff --git a/src/lib/dialog/dialog-animations.ts b/src/lib/dialog/dialog-animations.ts index 37de050d01eb..105b65c51fd9 100644 --- a/src/lib/dialog/dialog-animations.ts +++ b/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}))), ]; /**