首页 文章

用于mat-selection-list的Angular材料'disableRipple'无法在移动设备中使用

提问于
浏览
1

我应该防止在我的应用中与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 回答

  • 0

    尝试

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

    用您的列表类替换该类 . 也可以选择它 .

相关问题