Question

我应该防止与我的应用程序中的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-尝试了以下操作，但也没有帮助。似乎样式更改是通过core.js文件夹中/node_modules/@angular/material文件中的代码进行的，并且可能覆盖了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",

请感谢任何帮助/指针。

Answer 1

我一直在寻找相同的东西，这是我的解决方案：在Angular 6上工作。

<mat-selection-list >
     <mat-list-option  [disableRipple]="true">
     </mat-list-option>
</mat-selection-list>

CSS：

.mat-list-option, .mat-list-option:hover, .mat-list-option.mat-list-item-focus{
   background: inherit;
}
.mat-selection-list /deep/ .mat-list-item-disabled  h5, .mat-selection-list /deep/ .mat-list-item-disabled mat-pseudo-checkbox {
    color: #b0b0b0;
}

Answer 2

尝试

.mat-selection-list{ transition: none; }

用您的列表类替换该类。也尝试在选项上。

垫选择列表的角材料“ disableRipple”在移动设备中不起作用

2 个答案: