是否可以添加動畫dgrid行？

我們目前有一列和行這樣的dgrid：是否可以添加動畫dgrid行？

dgrid rows

最近我加入了一些代碼，以便我們能與出現的行上方的小X按鈕刪除行，當我們將鼠標懸停他們。

處理程序調用它來刪除該行： this.grid.store.remove（ROWID）;

當我們刪除行，因爲它是瞬時的，每行包含類似的文本，它並不總是顯而易見的東西剛剛發生的用戶。

我在想，如果有可能添加某種道場或CSS動畫的行刪除，如刪除的行褪色或滑出。這會使行刪除更明顯。

由於

來源

2015-05-28 greenkarmic

您可以使用dojo wipeout動畫功能滑出行，然後在動畫結束時刪除行。 dojo wipeout指導在[這裏]（https://dojotoolkit.org/reference-guide/1.10/dojo/fx/wipeOut.html#dojo-fx-wipeout） – frank

我爲動畫（WIPEOUT）一所選行創建的jsfiddle。

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(); 

    }); 

});

來源

2015-05-28 15:13:41 frank

這正是我正在尋找..非常好：）當動畫完成時，我仍然需要確保從商店中刪除該行，但否則就是這樣。 – greenkarmic

從商店中刪除行後的動畫很簡單，我可以使用onEnd屬性。像這樣：fx.wipeOut（{node：query（'＃myGrid-row-'+ rowId）[0]，onEnd：lang.hitch（this，function（）{this.grid.store.remove（rowId）;} ）}）。play（） – greenkarmic

我忘了提及在onEnd上有一個事件，你可以附加你的刪除函數來刪除該行。 – frank

是否可以添加動畫dgrid行？

回答

相關問題