kendo 网格单元格在每个单元格和每一行中显示动画，就像单人纸牌一样

Question

我尝试在出现的单元格和行的 kendo 网格上添加动画，但不能。

我想添加每行单元格的动画以在最后一个单元格之后出现。

搜索和谷歌搜索有许多我不想要的 detailRow 结果。更多有关 dataBound 的文章，讨论在单元格和数据出现后。

我想在所有单元格上添加一个接一个出现的效果。

这是angularjs rtl 标准项目

<div  id="grid" class="k-rtl" kendo-grid="grid" k-options="mainGridOptions" k-rebind="mainGridOptions">

像这样Console.log in this page that its sources here

但我们希望 kendo 网格显示为：

   MATRIX:[0,0] then [0,1] then .... then [0,N]

   [1,0] then [1,1] then .... then [1,N]

   ...

   [M,0] then [M,1] then .... then [M,N]

Answer 1

我可以提供一个基于 jQuery 的解决方案，因为基本上该方法应该与您的 angular 应用程序相同：

从隐藏的网格开始
在 Databound 事件上显示 grid-header
在 Databound 事件中以及在 setTimeout 函数中显示每行的每个单元格以提供动画效果。

请查看下面的代码段作为示例。
[注意：使用 visibility: hidden css 属性，因为 parent 上的 display: none 不会让你显示孩子]

<div id="grid" style="visibility: hidden"></div>

<script>
$("#grid").kendoGrid({
    selectable: "multiple cell",
    allowCopy: true,
    columns: [
        { field: "productName" },
        { field: "category" }
    ],
    dataBound: gridDataBound,  
    dataSource: [
        { productName: "Tea", category: "Beverages" },
        { productName: "Coffee", category: "Beverages" },
        { productName: "Ham", category: "Food" },
        { productName: "Bread", category: "Food" }
    ]
});

function gridDataBound(e){
  $(".k-grid-header").css("visibility", "visible");

  var rows = $("#grid").data("kendoGrid").items();
  var columnNumber = $("#grid").data("kendoGrid").columns.length;
  var animationSpeed = 500;

  $.each(rows, function(index, row){    
    setTimeout(function(){        
      $.each($(row).find("td"), 

             function(i, cell){                 
                        var interval = animationSpeed / columnNumber * i;
                        setTimeout(function(){
                        $(cell).css("visibility", "visible");
                        }, interval);
             });

     }, animationSpeed * index)
  });
}
</script>

kendo 网格单元格在每个单元格和每一行中显示动画，就像单人纸牌一样

kendo grid cell appear with animation in each cell and each rows like solitaire cards

jquery

animation

effects

angularjs

kendo-grid