feat(experimental/dialog): add the ability to control the animation duration (#13694)

For keeping parity with the Material dialog (#13466), adds the ability for consumers to configure the animation duration of the dialog.

Author: crisbeto

src/cdk-experimental/dialog/dialog-config.ts

@@ -86,4 +86,10 @@ export class DialogConfig<D = any> {
 
   /** Whether the dialog should focus the first focusable element on open. */
   autoFocus?: boolean = true;
+
+  /** Duration of the enter animation. Has to be a valid CSS value (e.g. 100ms). */
+  enterAnimationDuration?: string = '225ms';
+
+  /** Duration of the exit animation. Has to be a valid CSS value (e.g. 50ms). */
+  exitAnimationDuration?: string = '225ms';
 }

src/cdk-experimental/dialog/dialog-container.ts

@@ -54,13 +54,20 @@ 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('* => enter', animate('{{enterAnimationDuration}}')),
+      transition('* => exit, * => void', animate('{{exitAnimationDuration}}')),
     ])
   ],
   host: {
-    '[@dialog]': '_state',
+    '[@dialog]': `{
+      value: _state,
+      params: {
+        enterAnimationDuration: _config.enterAnimationDuration,
+        exitAnimationDuration: _config.exitAnimationDuration
+      }
+    }`,
     '(@dialog.start)': '_onAnimationStart($event)',
     '(@dialog.done)': '_animationDone.next($event)',
   },