css - 单击后保持角度材质垫波纹动画

Question

我使用 mat-list 和 matRipple 来制作点击动画。通常，垫波纹动画会在一段时间后消失，它可以用 RippleGlobalOptions 控制，但我想在点击后保留动画，这样背景颜色就不会改变。那么，有没有办法保持背景风格呢？

    <mat-list #selectable
              role="list">
                <mat-list-item *ngFor="let item of ItemsSource; let i = index;"
                               (click)="OnRowClicked(item)"
                               role="listitem"
                               matRipple>
                    {{item["Description"]}}
                    <mat-divider></mat-divider>
                </mat-list-item>
    </mat-list>

  public ItemsSource = [{Description: "test", Code: "1" },
                        {Description: "test2", Code: "2" }];

  public SelectedItem: any;

  public OnRowClicked(event: any) {
      this.SelectedItem = event;
    }  

分叉：https ://stackblitz.com/edit/angular-vrus3x

Answer 1

您可以使用手动波纹。

class MyComponent {

  /** Reference to the directive instance of the ripple. */
  @ViewChild(MatRipple) ripple: MatRipple;

  /** Shows a centered and persistent ripple. */
  launchRipple() {
    const rippleRef = this.ripple.launch({
      persistent: true,
      centered: true
    });

    // Fade out the ripple later.
    rippleRef.fadeOut();
  }
}

这是我在 google 上找到的stackblitz 。