Angular 材质：Shake MatDialog

Posted 2023-05-08

【中文标题】Angular 材质：Shake MatDialog

【英文标题】：Angular Material: Shake MatDialog

【发布时间】：2019-10-18 23:35:30

【问题描述】：

是否可以向 Material MatDialog 添加自定义 CSS 摇动动画（例如，如果您在 Form-Dialog 中输入了错误的信息）？

由于对话框是通过 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 的性质造成的吗？

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

【参考方案1】：

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

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

mat-dialog-container.mat-dialog-container