Is it possible to add a custom CSS shake animation to a Material MatDialog (e.g. if you entered wrong infos in a Form-Dialog)?
Since the dialog is instantiated via the MatDialog service, I can not add a ngClass (with a condition to add and remove the shake style) directly to the template.
Dialog creation looks like this:
constructor(private dialog: MatDialog) {
this.dialog.open(MyDialogComponent, {});
}
The shake style (in the MyDialog Component) like this:
:host#my-dialog {
&.shake-dialog {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both !important;
transform: translate3d(0, 0, 0)!important;
backface-visibility: hidden!important;
perspective: 1000px!important;
overflow: hidden !important;
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0)!important;
}
20%, 80% {
transform: translate3d(2px, 0, 0)!important;
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0)!important;
}
40%, 60% {
transform: translate3d(4px, 0, 0)!important;
}
}
}
}
As you can see I tried to add/remove the shake animation via HostBinding. I managed to dynamically add/remove the shake-class this way to my dialog component, however, it takes no effect since all webkit styles are kind of overridden. Inspect in Chrome:
Even though I added an ID to increase the specificity, the shaking styles are not applied. Is this due to the nature of a MatDialog?
Is there any way, I could get this to work? Or did I maybe choose the wrong approach in the beginning?
