角材料：摇动MatDialog

Question

是否可以向材质MatDialog添加自定义CSS震动动画（例如，如果您在“表单”对话框中输入了错误的信息）？

由于对话框是通过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添加/删除震动动画。我设法以这种方式向对话框组件动态添加/删除了震动类，但是，由于所有Webkit样式都被覆盖，因此它没有任何效果。在Chrome中检查：

即使我添加了ID以提高特异性，也不会应用摇动样式。这是由于MatDialog的性质造成的吗？

有什么办法可以使它正常工作吗？还是一开始我可能选择了错误的方法？

Answer 1

您应该声明对话框在自定义模块中，在其中使用NoopAnimations（禁用动画）。

禁用动画后，您可以覆盖叠加层。选择器是

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