如何使Angular Material 2对话框具有动画效果？

npm install --save @angular/material @angular/cdk @angular/animations

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDialogModule } from '@angular/material/dialog';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    MatDialogModule
  ],
  // ...
})
export class AppModule { }

import { Component, OnInit } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.css'],
  animations: [
    trigger('dialogAnimation', [
      state('open', style({
        transform: 'scale(1)',
        opacity: 1
      })),
      state('closed', style({
        transform: 'scale(0.8)',
        opacity: 0
      })),
      transition('open <=> closed', animate('300ms ease-in-out'))
    ])
  ]
})
export class DialogComponent implements OnInit {
  dialogState: string = 'closed';

  constructor(public dialogRef: MatDialogRef<DialogComponent>) { }

  ngOnInit() {
    this.dialogState = 'open';
  }

  closeDialog() {
    this.dialogState = 'closed';
    setTimeout(() => {
      this.dialogRef.close();
    }, 300);
  }
}

<mat-dialog-content [@dialogAnimation]="dialogState">
  <!-- 对话框内容 -->
</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button (click)="closeDialog()">关闭</button>
</mat-dialog-actions>