fix(datepicker): nested animation not working (#10355)

Fixes the calendar fade-in animation being blocked by its parent animation.

Relates to #9134.

Author: crisbeto

src/lib/datepicker/datepicker-animations.ts

@@ -12,6 +12,9 @@ import {
   transition,
   trigger,
   AnimationTriggerMetadata,
+  group,
+  query,
+  animateChild,
 } from '@angular/animations';
 
 /** Animations used by the Material datepicker. */
@@ -23,7 +26,10 @@ export const matDatepickerAnimations: {
   transformPanel: trigger('transformPanel', [
     state('void', style({opacity: 0, transform: 'scale(1, 0)'})),
     state('enter', style({opacity: 1, transform: 'scale(1, 1)'})),
-    transition('void => enter', animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)')),
+    transition('void => enter', group([
+      query('@fadeInCalendar', animateChild()),
+      animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)')
+    ])),
     transition('* => void', animate('100ms linear', style({opacity: 0})))
   ]),