单击后保持角材料垫波纹动画

时间:2020-04-28 13:20:27

标签: css angular angular-material material-design mat-list

我将mat-list和matRipple一起用于单击动画。通常,垫波纹动画会在一段时间后消失,可以使用RippleGlobalOptions进行控制,但是我想在单击后保留动画,以便背景颜色不会改变。那么,有什么方法可以保持背景风格?

def custom_loss_wrapper(input_train):
    @tf.function
    def summing(row):
        return tf.math.reduce_sum(row, 1,keepdims=True)

    @tf.function
    def custom_loss(y_true, y_pred):
        row_M = input_train
        row_M = row_M[:, 2:5]
        sum_M = summing(row_M)
        inv_M = (1/sum_M)

        row_B = y_pred[:, :3]
        sum_B = summing(row_B)

        row_Q = tf.math.multiply(inv_M,row_B)
        alpha = 0.01
        penalty =  K.mean(K.square(sum_Q - 1))

        return K.mean(K.square(y_true - y_pred)) + (1/alpha) * penalty

    return custom_loss
    <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>

叉子:https://stackblitz.com/edit/angular-vrus3x

1 个答案:

答案 0 :(得分:0)

您可以使用Manual Ripples

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