Question

我正在使用角度材质对话框组件代码，并希望在打开/关闭持续时间上添加向右滑动动画。

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']});

如何在角度材质对话框中创建自定义动画？

2 个答案: