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

Question

In this StackBlitz我有一个用于 Angular 网格的剑道。点击按钮时，半秒后第二行被选中，两秒后自动取消选中。

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

@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 函数。