动画完成后如何关闭对话框？

Question

我不会做一些动画，然后关闭对话框：

                const animation = el.animate([keyFrame0, keyFrame100],
                          { duration: 600, easing: 'ease-out' });
                animation.onfinish = () => ref.close(dialogResult);

对话框保持打开状态，直到第二次单击。

stackblitz demo

Answer 1

您可以订阅对话框引用的“ afterOpened”，然后制作动画并在此处关闭。

openDialog(): void {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: "250px",
      data: { name: this.name, animal: this.animal }
    });
    dialogRef.afterOpened().subscribe(() => {
      const wrapper = document.getElementsByClassName(
        "cdk-global-overlay-wrapper"
      )[0];
      const animation = wrapper.animate([{ left: "0" }, { left: "100%" }], {
        duration: 600,
        easing: "ease-out"
      });
      animation.onfinish = () => {
        dialogRef.close();
        wrapper.style.display = 'none'
      }
    })
  }

如果要在制作动画之前超时，可以使用“ setTimeout”功能。