как закрыть диалог после завершения анимации?

Question

Я хочу сделать анимацию и после этого закрыть диалоговое окно:

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

диалоговое окно остается открытым до второго щелчка.

демонстрация stackblitz

Answer 1

Вы можете подписаться на "afterOpened" в диалоговом окне ref и выполнить анимацию и закрыть ее.

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"функция.