How to animate a MatDialog on close using scss/sass? - css

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