添加淡入/淡出到网格行选择

Question

In this StackBlitz我有一个用于Angular网格的Kendo。单击该按钮时，将在半秒后选择第二行，并在两秒后自动取消选择。

我需要的是选择的行在两秒后淡入选择和淡出，这可能吗？

@Component({
    selector: 'my-app',
    template: `
        <button type="button" (click)="select()">Select</button>
        <kendo-grid [data]="gridData" [height]="410"
        kendoGridSelectBy="ProductID" [(selectedKeys)]="selection">
            <kendo-grid-column field="ProductID" title="ID" width="40">
            </kendo-grid-column>
            <kendo-grid-column field="ProductName" title="Name" width="250">
            </kendo-grid-column>
        </kendo-grid>
    `
})
export class AppComponent {
    selection: number[] = [];
    public gridData: any[] = products;

    select(){
      setTimeout(() => {
           this.selection = [2];
           setTimeout(() => {
              this.selection = [];
         }, 2000);
      }, 500);
    }
}

Answer 1

不确定这是否是最优化的解决方案，但您可以使用：

• rowClass（https://www.telerik.com/kendo-angular-ui/components/grid/api/GridComponent/#toc-rowclass）
• selectionChange（https://www.telerik.com/kendo-angular-ui/components/grid/api/GridComponent/#toc-selectionchange）

使用该函数和事件，您可以向所选行添加自定义类，并使用CSS作为淡入淡出动画。你的代码是这样的：

import { Component } from '@angular/core';
import { products } from './products';
import { Component, ViewEncapsulation } from '@angular/core';
import { RowClassArgs } from '@progress/kendo-angular-grid';

@Component({
    selector: 'my-app',
    encapsulation: ViewEncapsulation.None,
    styles: [`
    .k-grid tr.isSelected {
        background-color: #41f4df;
        transition: background-color 1s linear;
    }
    .k-grid tr.isNotSelected {
        background-color: transparent;
        transition: background-color 2s linear;
    }
    `],
    template: `
    <kendo-grid [data]="gridData"
    [height]="410"
    kendoGridSelectBy="ProductID"
    [rowClass]="rowCallback"
    (selectionChange)="onSelect($event)">
    <kendo-grid-column field="ProductID" title="ID" width="40">
    </kendo-grid-column>
    <kendo-grid-column field="ProductName" title="Name" width="250">
    </kendo-grid-column>
    </kendo-grid>
    `
})
export class AppComponent {
    public gridData: any[] = products;

    public onSelect(e){
        setTimeout(() => {
            e.selectedRows[0].dataItem.isSelected = true;
            setTimeout(() => {
                e.selectedRows[0].dataItem.isSelected = false;
            }, 2000);
        }, 500);
    }

    public rowCallback(context: RowClassArgs) {
        if (context.dataItem.isSelected){
            return {
                isSelected: true,
            };
        } else {
            return {isNotSelected: true};
        }
    }
}

- 编辑 -

刚注意到你只想用第二行做到这一点。在这种情况下，您可以将行e.selectedRows[0].dataItem.isSelected = true;替换为：products[1].isSelected = true;。

并使用您的按钮调用onSelect函数。