如何在 angular material 对话框中创建自定义动画？

Question

我正在使用 angular material 对话框组件代码并希望在 open/close 持续时间内添加向右滑动的动画。

openDialog() {
    this.dialog.open(DialogContentExampleDialog);
}

谢谢

Answer 1

您可以使用名为 ng-dialog-animation 的库并使用此库提供的名为 NgDialogAnimationService 的服务来打开对话框而不是 MatDialog。

您的组件将具有以下代码行：

import { Component } from "@angular/core";
import { MatDialog } from "@angular/material/dialog";

 import { NgDialogAnimationService } from "ng-dialog-animation";

@Component({
selector: "dialog-content-example",
templateUrl: "dialog-content-example.html",
styleUrls: ["dialog-content-example.css"],
 })

export class DialogContentExample {
constructor(public dialog: NgDialogAnimationService){}

openDialog() {
const dialogRef = this.dialog.open(DialogContentExampleDialog, {
  width: "250px",
  // option1 
  animation:{to:"aside"},})

dialogRef.afterClosed().subscribe(result => {
  console.log(`Dialog result: ${result}`);
});
}
}

Answer 2

Demo 把这个放在 index.hml

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />

在组件中调用它

const dialogRef = this.dialog.open(DialogContentExampleDialog,{panelClass: ['animate__animated','animate__slideInLeft']});

如何在 angular material 对话框中创建自定义动画？

How to create custom animation in angular material dialog?

angular-material

angular

angular9