css - Angular 材质:Shake MatDialog
问题描述
是否可以向 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 的性质造成的吗?
有什么办法,我可以让它工作吗?还是我一开始可能选择了错误的方法?
解决方案
您应该将对话框声明在使用的自定义模块中NoopAnimations
(它禁用动画)。
禁用动画后,您可以覆盖覆盖。选择器是
mat-dialog-container.mat-dialog-container {}
推荐阅读
- c++ - 错误:线程调用函数时调用不匹配
- c# - 如何使用 Ocelot API 网关重新路由来支持 Kubernetes 就绪/活跃度探测?
- php - 从数组中提取“收入”的总和
- google-analytics - 使用具有日期范围的 API 方法从 Google Analytics 获取目标
- python - 匹配冒号前后的单词
- python - AttributeError:模块“类型”没有属性“IntType”
- angular - 添加 selectionMode 属性时 PrimeNG 树无法正确显示
- java - Java 8 方法引用可以一直用作 Lambda 吗?
- prolog - prolog 中的家庭关系:hasNoChild(X) 方法
- spring-boot - spring boot unix service is not pick up mode option