gpt4 book ai didi

css - Angular Material : Shake MatDialog

转载 作者:行者123 更新时间:2023-11-27 23:52:42 27 4
gpt4 key购买 nike

是否可以将自定义 CSS 摇动动画添加到 Material MatDialog(例如,如果您在 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 添加/删除摇动动画。我设法以这种方式动态添加/删除 shake-class 到我的对话框组件,但是,它没有任何效果,因为所有 webkit 样式都被覆盖了。在 Chrome 中检查:

Chrome Inspect

尽管我添加了一个 ID 来增加特异性,但摇晃样式并未应用。这是由于 MatDialog 的性质造成的吗?

有什么办法可以让它发挥作用吗?还是我一开始选择了错误的方法?

最佳答案

您应该在自定义模块中声明对话框,其中使用了 NoopAnimations(它禁用动画)。

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

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

关于css - Angular Material : Shake MatDialog,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56426926/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com