Можно ли добавить анимацию в строки dgrid?

Question

В настоящее время у нас есть dgrid с одним столбцом и такими строками:

Недавно я добавил код, чтобы мы могли удалять строки с помощью маленькой кнопки X, которая появляется над строкой при наведении на них курсора.

Обработчик вызывает это, чтобы удалить строку: this.grid.store.remove(rowId);

Когда мы удаляем строку, так как она мгновенная и каждая строка содержит одинаковый текст, для пользователя не всегда очевидно, что что-то только что произошло.

Мне было интересно, возможно ли добавить какую-либо анимацию додзё или 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();

     });

});