Угловой Материал: Shake MatDialog

Question

Можно ли добавить пользовательскую анимацию встряхивания CSS в Material MatDialog (например, если вы ввели неверную информацию в диалоге формы)?

Поскольку диалоговое окно создается с помощью службы MatDialog, я не могу добавить ngClass (с условием добавления и удаления стиля встряхивания) непосредственно в шаблон.

Создание диалога выглядит так:

  constructor(private dialog: MatDialog) { 
    this.dialog.open(MyDialogComponent, {});
  }

Стиль встряхивания (в компоненте MyDialog) примерно так:

: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;
            }
        }
    }
}

Как видите, я пытался добавить / удалить анимацию дрожания через HostBinding. Мне удалось динамически добавить / удалить класс Shake таким образом к моему диалоговому компоненту, однако это не дает никакого эффекта, так как все стили веб-набора являются переопределенными. Осмотреть в Chrome:

Несмотря на то, что я добавил идентификатор для повышения специфичности, стили встряхивания не применяются. Это связано с природой MatDialog?

Есть ли способ, я мог бы заставить это работать? Или я возможно выбрал неправильный подход в начале?

Answer 1

Вы должны объявить диалог в пользовательском модуле, где используется NoopAnimations (отключает анимацию).

Как только анимация отключена, вы можете переопределить наложение. Селектор

mat-dialog-container.mat-dialog-container {}