Dojo 是否可以将动画添加到dgrid行?
目前,我们有一个dgrid,其中只有一列和一行,如下所示: 最近,我添加了一些代码,这样我们就可以使用鼠标悬停行上方的小X按钮删除行 处理程序调用此函数以删除该行: this.grid.store.remove(rowId) 当我们删除一行时,由于它是即时的,并且每一行都包含相似的文本,所以用户并不总是很清楚刚刚发生了什么 我想知道是否有可能在行删除中添加某种dojo或css动画,比如删除的行淡出或滑出。这将使行删除更加明显 谢谢我已经为选定行创建了一个动画(擦除)Dojo 是否可以将动画添加到dgrid行?,dojo,css-animations,dgrid,Dojo,Css Animations,Dgrid,目前,我们有一个dgrid,其中只有一列和一行,如下所示: 最近,我添加了一些代码,这样我们就可以使用鼠标悬停行上方的小X按钮删除行 处理程序调用此函数以删除该行: this.grid.store.remove(rowId) 当我们删除一行时,由于它是即时的,并且每一行都包含相似的文本,所以用户并不总是很清楚刚刚发生了什么 我想知道是否有可能在行删除中添加某种dojo或css动画,比如删除的行淡出或滑出。这将使行删除更加明显 谢谢我已经为选定行创建了一个动画(擦除) require({
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();
});
});
可以使用dojo擦除动画功能滑出该行,然后在动画结束时删除该行。dojo wipeout指南正是我想要的。。非常好:)动画完成后,我仍然需要确保从存储中删除行,否则就是这样。要在动画简单后从存储中删除行,我可以使用ONED属性。例如:fx.wipeOut({node:query('#myGrid row-'+rowId)[0],oned:lang.hitch(this,function(){this.grid.store.remove(rowId);})})。play()我忘了提到有一个事件oned,您可以将delete函数附加到该事件中以删除该行。