feat(dialog): add the ability to control the animation duration

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/demo-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/demo-app/dialog/dialog-demo.ts

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

src/lib/dialog/dialog-animations.ts

@@ -20,10 +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', animate('150ms cubic-bezier(0, 0, 0.2, 1)',
+  transition('* => enter', animate('{{enterAnimationDuration}} 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('{{exitAnimationDuration}} cubic-bezier(0.4, 0.0, 0.2, 1)', style({opacity: 0}))),
 ];
 
 /**

src/lib/dialog/dialog-config.ts

@@ -111,5 +111,11 @@ export class MatDialogConfig<D = any> {
    */
   closeOnNavigation?: boolean = true;
 
+  /** 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/lib/dialog/dialog-container.ts

@@ -65,7 +65,13 @@ export function throwMatDialogContentAlreadyAttachedError() {
     '[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledBy',
     '[attr.aria-label]': '_config.ariaLabel',
     '[attr.aria-describedby]': '_config.ariaDescribedBy || null',
-    '[@dialogContainer]': '_state',
+    '[@dialogContainer]': `{
+      value: _state,
+      params: {
+        enterAnimationDuration: _config.enterAnimationDuration,
+        exitAnimationDuration: _config.exitAnimationDuration
+      }
+    }`,
     '(@dialogContainer.start)': '_onAnimationStart($event)',
     '(@dialogContainer.done)': '_onAnimationDone($event)',
   },

src/lib/dialog/dialog.md

@@ -80,8 +80,8 @@ export class YourDialog {
 ### Dialog content
 Several directives are available to make it easier to structure your dialog content:
 
-| Name                  | Description                                                                                                   |
-|-----------------------|---------------------------------------------------------------------------------------------------------------|
+| Name                   | Description                                                                                                   |
+|------------------------|---------------------------------------------------------------------------------------------------------------|
 | `mat-dialog-title`     | \[Attr] Dialog title, applied to a heading element (e.g., `<h1>`, `<h2>`)                                     |
 | `<mat-dialog-content>` | Primary scrollable content of the dialog                                                                      |
 | `<mat-dialog-actions>` | Container for action buttons at the bottom of the dialog                                                      |
@@ -139,6 +139,13 @@ the `ComponentFactory` for it.
 export class AppModule {}
 ```
 
+### Controlling the dialog animation
+You can control the duration of the dialog's enter and exit animations using the
+`enterAnimationDuration` and `exitAnimationDuration` options. If you want to disable the dialog's
+animation completely, you can do so by setting the properties to `0ms`.
+
+<!-- example(dialog-animations) -->
+
 ### Accessibility
 By default, each dialog has `role="dialog"` on the root element. The role can be changed to
 `alertdialog` via the `MatDialogConfig` when opening.

src/material-examples/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/material-examples/dialog-animations/dialog-animations-example.css

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

src/material-examples/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/material-examples/dialog-animations/dialog-animations-example.ts

@@ -0,0 +1,30 @@
+import {Component} from '@angular/core';
+import {MatDialog, MatDialogRef} from '@angular/material';
+
+/**
+ * @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>) {}
+}