剑道网格单元格在每个单元格和每一行中都出现动画，就像纸牌一样

Question

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

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

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

我想对所有单元格添加效果，使其一个接一个地出现。

这是 angularjs rtl 标准项目

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

喜欢这个Console.log在这个页面上它的来源here

但我们希望剑道网格看起来像：

   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 事件以及 setTimeout 函数中显示每行的每个单元格以提供动画效果。

请以下面的 sn-p 为例。
[注意：使用可见性：隐藏 css 属性，因为父级上的 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>