如何使用 scss/sass 在关闭时为 MatDialog 设置动画？

Question

I am tending to override the scss-animations inside @angular/material/dialog . I have tried many ways and read many articles but I am still unable to reach to a solution. When the MatDialog popup opens, it has its own animations but when I close it, it closes immediately (without animation ).

• Firstly, the dialog opens by means of my NotifierService which looks like the following:

notifier.service.ts

@Injectable()
export class NotifierService {
   ...
   
   constructor(
      private dialog: MatDialog,
      private dialogRef: MatDialogRef<OverlayComponent>
   ) { }

   ...
   
   public open(notification: Notification): void {
      this.dialogRef = this.dialog.open(NotificationComponent, {
         ...
         panelClass: 'notifications-popup',
         data: {
            notification: notification
         }
      });
   }
   ...

}

• In my global scss file I have the following code:

styles.scss

...

@keyframes fadeOut {
   0% { width: 85%; height: 85vh; }
   100% { width: 0%; height: 0%; }
}

@keyframes fadeIn {
   0% { width: 0vh; height: 0vh; }
   100% { width: 85%; height: 85vh; }
}

...

div.notifications-popup {
  animation: fadeIn 0.15s forwards !important;
  animation-delay: 0.15s;
}

...

• In my NotificationComponent I have the following above all:

notification.component.ts

...
@Component({ ... })
export class NotificationComponent {
   ...

   public close(): void {
      this.fadeOutOnClose(); // Theoretically this should animate the closure of the dialog??????
      this.matDialogRef.close(this.data.overlay);
   }

   public fadeOutOnClose(): void {
      const view = document.getElementsByClassName('notifications-popup');
      for (let i = 0; i < view.length; i++) {
         this.renderer.setStyle(view[i], 'animation', 'fadeOut 1s forwards !important');
         this.renderer.setStyle(view[i], 'animation-delay', '1s');
      }
   }
   
   ...

}

...

Does anyone have any ideas about how to animate the closure of a MatDialog?

Answer 1

Unfortunately, it's not an easy task. That's why I chose this library for my projects:

• https://www.npmjs.com/package/ng-dialog-animation