是否可以向 dgrid 行添加动画？

Question

我们目前有一个单列单行的 dgrid，如下所示：

最近我添加了一些代码，这样我们就可以使用悬停在行上方的小 X 按钮删除行。

处理程序调用它来删除行： this.grid.store.remove(rowId);

当我们删除一行时，由于它是即时的并且每行都包含相似的文本，所以用户并不总是很明显刚刚发生了什么。

我想知道是否可以为行删除添加某种 dojo 或 css 动画，例如删除的行淡出或滑出。这样删除行会更明显

谢谢

Answer 1

我创建了一个 jsfiddle 用于动画化（wipeOut）选定的行。

require({
    packages: [
        {
            name: 'dgrid',
            location: '//cdn.rawgit.com/SitePen/dgrid/v0.3.16'
        },
        {
            name: 'xstyle',
            location: '//cdn.rawgit.com/kriszyp/xstyle/v0.2.1'
        },
        {
            name: 'put-selector',
            location: '//cdn.rawgit.com/kriszyp/put-selector/v0.3.5'
        }
    ]
}, [
    'dojo/_base/declare',
    'dgrid/OnDemandGrid',
    'dgrid/Selection',
    'dojo/store/Memory',
    "dojo/fx",
    'dojo/domReady!'
], function(declare, Grid, Selection, Memory,fx) {
    var data = [

        { id: 1, name: 'Peter', age:24 },
        { id: 2, name: 'Paul', age: 30 },
         { id: 3, name: 'Mary', age:46 }
    ];
    var store = new Memory({ data: data });
    var options = {
        columns: [
           /*{ field: 'id',  label: 'ID' },*/
            { field: 'name', label: 'Name' },
            { field: 'age', label: 'Age' }

        ],
        store: store
    };
    var CustomGrid = declare([ Grid, Selection ]);
    var grid = new CustomGrid(options, 'gridcontainer');

    grid.on('dgrid-select', function (event) {
    // Report the item from the selected row to the console.
    console.log('Row selected: ', event.rows[0].data);
        //WipeOut animation for selected row.
        fx.wipeOut({ node: event.rows[0].element }).play();

     });

});

是否可以向 dgrid 行添加动画？

Is it possible to add animations to dgrid rows?

dojo

css-animations

dgrid