feat(material/dialog): add the ability to control the animation duration (#13466)

Since the dialog animation is on the `MatDialogContainer`, consumers aren't able to disable the animation. These changes add properties to the dialog config that allow consumers to set the duration of the dialog's enter and exit animations.

Fixes #3616.

Author: crisbeto

src/components-examples/material/dialog/dialog-animations/dialog-animations-example-dialog.html

@@ -0,0 +1,8 @@
+<h1 mat-dialog-title>Delete file</h1>
+<div mat-dialog-content>
+  Would you like to delete cat.jpeg?
+</div>
+<div mat-dialog-actions>
+  <button mat-button mat-dialog-close>No</button>
+  <button mat-button mat-dialog-close cdkFocusInitial>Ok</button>
+</div>

src/components-examples/material/dialog/dialog-animations/dialog-animations-example.css

@@ -0,0 +1,3 @@
+button {
+  margin-right: 8px;
+}

src/components-examples/material/dialog/dialog-animations/dialog-animations-example.html

@@ -0,0 +1,2 @@
+<button mat-raised-button (click)="openDialog('0ms', '0ms')">Open dialog without animation</button>
+<button mat-raised-button (click)="openDialog('3000ms', '1500ms')">Open dialog slowly</button>

src/components-examples/material/dialog/dialog-animations/dialog-animations-example.ts

@@ -0,0 +1,30 @@
+import {Component} from '@angular/core';
+import {MatDialog, MatDialogRef} from '@angular/material/dialog';
+
+/**
+ * @title Dialog Animations
+ */
+@Component({
+  selector: 'dialog-animations-example',
+  styleUrls: ['dialog-animations-example.css'],
+  templateUrl: 'dialog-animations-example.html',
+})
+export class DialogAnimationsExample {
+  constructor(public dialog: MatDialog) {}
+
+  openDialog(enterAnimationDuration: string, exitAnimationDuration: string): void {
+    this.dialog.open(DialogAnimationsExampleDialog, {
+      width: '250px',
+      enterAnimationDuration,
+      exitAnimationDuration,
+    });
+  }
+}
+
+@Component({
+  selector: 'dialog-animations-example-dialog',
+  templateUrl: 'dialog-animations-example-dialog.html',
+})
+export class DialogAnimationsExampleDialog {
+  constructor(public dialogRef: MatDialogRef<DialogAnimationsExampleDialog>) {}
+}

src/components-examples/material/dialog/index.ts

@@ -23,6 +23,10 @@ import {
   DialogFromMenuExampleDialog,
 } from './dialog-from-menu/dialog-from-menu-example';
 import {DialogHarnessExample} from './dialog-harness/dialog-harness-example';
+import {
+  DialogAnimationsExample,
+  DialogAnimationsExampleDialog,
+} from './dialog-animations/dialog-animations-example';
 
 export {
   DialogContentExample,
@@ -36,6 +40,8 @@ export {
   DialogHarnessExample,
   DialogOverviewExample,
   DialogOverviewExampleDialog,
+  DialogAnimationsExample,
+  DialogAnimationsExampleDialog,
 };
 
 const EXAMPLES = [
@@ -50,6 +56,8 @@ const EXAMPLES = [
   DialogHarnessExample,
   DialogOverviewExample,
   DialogOverviewExampleDialog,
+  DialogAnimationsExample,
+  DialogAnimationsExampleDialog,
 ];
 
 @NgModule({

src/dev-app/dialog/dialog-demo.html

@@ -102,6 +102,17 @@ <h2>Other options</h2>
       </mat-form-field>
     </p>
 
+    <p>
+      <mat-form-field>
+        <mat-label>Enter duration</mat-label>
+        <input matInput [(ngModel)]="config.enterAnimationDuration">
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>Exit duration</mat-label>
+        <input matInput [(ngModel)]="config.exitAnimationDuration">
+      </mat-form-field>
+    </p>
+
     <p>
       <mat-checkbox [(ngModel)]="config.disableClose">Disable close</mat-checkbox>
     </p>

src/dev-app/dialog/dialog-demo.ts

@@ -31,6 +31,8 @@ export class DialogDemo {
     height: '',
     minWidth: '',
     minHeight: '',
+    enterAnimationDuration: defaultDialogConfig.enterAnimationDuration,
+    exitAnimationDuration: defaultDialogConfig.exitAnimationDuration,
     maxWidth: defaultDialogConfig.maxWidth,
     maxHeight: '',
     position: {

src/material/dialog/dialog-animations.ts

@@ -34,14 +34,17 @@ export const matDialogAnimations: {
     transition(
       '* => enter',
       group([
-        animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({transform: 'none', opacity: 1})),
+        animate(
+          '{{enterAnimationDuration}} cubic-bezier(0, 0, 0.2, 1)',
+          style({transform: 'none', opacity: 1}),
+        ),
         query('@*', animateChild(), {optional: true}),
       ]),
     ),
     transition(
       '* => void, * => exit',
       group([
-        animate('75ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({opacity: 0})),
+        animate('{{exitAnimationDuration}} cubic-bezier(0.4, 0.0, 0.2, 1)', style({opacity: 0})),
         query('@*', animateChild(), {optional: true}),
       ]),
     ),

src/material/dialog/dialog-config.ts

@@ -126,5 +126,11 @@ export class MatDialogConfig<D = any> {
   /** Alternate `ComponentFactoryResolver` to use when resolving the associated component. */
   componentFactoryResolver?: ComponentFactoryResolver;
 
+  /** Duration of the enter animation. Has to be a valid CSS value (e.g. 100ms). */
+  enterAnimationDuration?: string = '150ms';
+
+  /** Duration of the exit animation. Has to be a valid CSS value (e.g. 50ms). */
+  exitAnimationDuration?: string = '75ms';
+
   // TODO(jelbourn): add configuration for lifecycle hooks, ARIA labelling.
 }

src/material/dialog/dialog-container.ts

@@ -312,7 +312,7 @@ export abstract class _MatDialogContainerBase extends BasePortalOutlet {
     '[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledBy',
     '[attr.aria-label]': '_config.ariaLabel',
     '[attr.aria-describedby]': '_config.ariaDescribedBy || null',
-    '[@dialogContainer]': '_state',
+    '[@dialogContainer]': `_getAnimationState()`,
     '(@dialogContainer.start)': '_onAnimationStart($event)',
     '(@dialogContainer.done)': '_onAnimationDone($event)',
   },
@@ -360,4 +360,14 @@ export class MatDialogContainer extends _MatDialogContainerBase {
       this._trapFocus();
     }
   }
+
+  _getAnimationState() {
+    return {
+      value: this._state,
+      params: {
+        enterAnimationDuration: this._config.enterAnimationDuration || '150ms',
+        exitAnimationDuration: this._config.exitAnimationDuration || '75ms',
+      },
+    };
+  }
 }