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}))),
 ];
 
 /**