我应该防止在我的应用中与Angular Material组件交互时发生的任何或所有动画
期望是,当我触摸/点击mat-selection-list中的一个项目时,它不应该显示任何类型的fadeIn动画,因为它通常会
我正在使用 NoopAnimationsModule
而我在app.module.ts中没有使用 BrowserAnimationModule
以下是在桌面上正常工作但不能在移动设备上运行的代码片段
<mat-selection-list disableRipple (selectionChange)="onValueChange($event)">
<mat-list-option (click)="proxyClick($event,'checkbox')" (touch)="proxyClick($event,'checkbox')" *ngFor="let item of list"
[selected]="item.selected" [disabled]="item.disabled" value="{{ item.name }}" disableRipple>
<span disableRipple>{{item.name}} ({{item.count}})</span>
</mat-list-option>
</mat-selection-list>
以防万一,proxyClick方法只是帮助我停止传播点击/触摸
public proxyClick(event, targetGroupIdentified?: string) {
if (targetGroupIdentified) {
event.cancelBubble = true;
event.stopPropagation();
return false;
}
}
我尝试了以下代替 disableRipple
. 它们只能在桌面上工作,但不能在移动设备上使用 mat-selection-list
元素
-
尝试了
[disableRipple]="true"
而不是disableRipple
-
尝试将
[@.disabled]="true"
添加到我的HTML文件中的几乎所有标签中 -
尝试将
@HostBinding('@.disabled') disabled = true;
添加到我的component.ts文件中
编辑1 - 尝试以下,它也没有帮助 . 看起来样式更改是通过 /node_modules/@angular/material
文件夹中的 core.js
文件中的代码发生的,并且可能会覆盖scss中的样式定义
::ng-deep * {
/*CSS transitions*/
-o-transition-property: none !important;
-moz-transition-property: none !important;
-ms-transition-property: none !important;
-webkit-transition-property: none !important;
transition-property: none !important;
/*CSS transforms*/
-o-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-webkit-transform: none !important;
transform: none !important;
/*CSS animations*/
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
}
我的工作环境规范如下
"@angular/animations": "^5.0.0",
"@angular/cdk": "^5.2.4",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/material": "^5.2.4",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/platform-server": "^5.0.0",
"@angular/router": "^5.0.0",
请欣赏任何帮助/指针 .
1 回答
尝试
用您的列表类替换该类 . 也可以选择它 .