Out of sheer curiosity, this method allows you to achieve a similar effect as shown in the example:
const dialogReference = this.dialog.open(LoginDialogComponent, {
width: '320px',
});
let center = (window.innerWidth / 2) - 160;
let yu = 0
dialogReference.updatePosition({left: '0px'})
const interval = setInterval(() => {
if (center > yu) {
yu += 20;
dialogReference.updatePosition({ left: (yu) + 'px' })
} else {
clearInterval(interval);
center = window.innerWidth;
}
});
dialogReference.beforeClosed().subscribe(() => {
yu = 0
const interval = setInterval(() => {
if (center > 0) {
yu -= 15;
dialogReference.updatePosition({ right: (yu) + 'px' })
} else {
clearInterval(interval);
center = window.innerWidth;
}
});
})
Remove dialogRef.beforeClose from open dialog method,
and add it to the close method in Dialog Component for the same result.
onNoClick(): void {
const elementRect = this.dialogReference._containerInstance['_elementRef']
let yu = elementRect.nativeElement.offsetLeft;
const interval = setInterval(() => {
if (yu > - 160) {
yu -= 10;
this.dialogReference.updatePosition({ right: (yu) + 'px' })
} else {
clearInterval(interval);
this.dialogReference.close();
}
});
}
The dialog reference has an updateSize option that allows you to change dimensions on close.
Just for fun!