chore(dialog): update dialog animations for 2018 material spec update (#13059)

Author: josephperrott

src/lib/dialog/dialog-animations.ts

@@ -14,19 +14,26 @@ import {
   AnimationTriggerMetadata,
 } from '@angular/animations';
 
+const animationBody = [
+  // Note: The `enter` animation transitions to `transform: none`, because for some reason
+  // specifying the transform explicitly, causes IE both to blur the dialog content and
+  // 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('* => void, * => exit',
+      animate('75ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({opacity: 0}))),
+];
+
 /** Animations used by MatDialog. */
 export const matDialogAnimations: {
+  readonly dialogContainer: AnimationTriggerMetadata;
   readonly slideDialog: AnimationTriggerMetadata;
 } = {
-  /** Animation that slides the dialog in and out of view and fades the opacity. */
-  slideDialog: trigger('slideDialog', [
-    // Note: The `enter` animation doesn't transition to something like `translate3d(0, 0, 0)
-    // scale(1)`, because for some reason specifying the transform explicitly, causes IE both
-    // to blur the dialog content and decimate the animation performance. Leaving it as `none`
-    // solves both issues.
-    state('enter', style({ transform: 'none', opacity: 1 })),
-    state('void', style({ transform: 'translate3d(0, 25%, 0) scale(0.9)', opacity: 0 })),
-    state('exit', style({ transform: 'translate3d(0, 25%, 0)', opacity: 0 })),
-    transition('* => *', animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)')),
-  ])
+  /** Animation that is applied on the dialog container by defalt. */
+  dialogContainer: trigger('dialogContainer', animationBody),
+
+  /** @deprecated @breaking-change 8.0.0 Use `matDialogAnimations.dialogContainer` instead. */
+  slideDialog: trigger('slideDialog', animationBody)
 };

src/lib/dialog/dialog-container.ts

@@ -55,7 +55,7 @@ export function throwMatDialogContentAlreadyAttachedError() {
   // Using OnPush for dialogs caused some G3 sync issues. Disabled until we can track them down.
   // tslint:disable-next-line:validate-decorators
   changeDetection: ChangeDetectionStrategy.Default,
-  animations: [matDialogAnimations.slideDialog],
+  animations: [matDialogAnimations.dialogContainer],
   host: {
     'class': 'mat-dialog-container',
     'tabindex': '-1',
@@ -65,9 +65,9 @@ export function throwMatDialogContentAlreadyAttachedError() {
     '[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledBy',
     '[attr.aria-label]': '_config.ariaLabel',
     '[attr.aria-describedby]': '_config.ariaDescribedBy || null',
-    '[@slideDialog]': '_state',
-    '(@slideDialog.start)': '_onAnimationStart($event)',
-    '(@slideDialog.done)': '_onAnimationDone($event)',
+    '[@dialogContainer]': '_state',
+    '(@dialogContainer.start)': '_onAnimationStart($event)',
+    '(@dialogContainer.done)': '_onAnimationDone($event)',
   },
 })
 export class MatDialogContainer extends BasePortalOutlet {
@@ -93,7 +93,7 @@ export class MatDialogContainer extends BasePortalOutlet {
   _id: string;
 
   constructor(
-    private _elementRef: ElementRef<HTMLElement>,
+    private _elementRef: ElementRef,
     private _focusTrapFactory: FocusTrapFactory,
     private _changeDetectorRef: ChangeDetectorRef,
     @Optional() @Inject(DOCUMENT) private _document: any,