How can I properly animate the removal of an item from a data model in Cascades? - blackberry-10

Question

When I try to animate the removal of an item from a data model, the item gets removed, but apparently because the animation I am using sets the item's dimensions to 0, the next item added to the data model is not visible. To see it, I have to reload the entire data model, or close and re-open my app. If I don't do the animation, items are removed and added correctly, just not with the effect I'm trying to achieve. My sample code is as follows:
ListView {
dataModel: GroupDataModel {
id: noteDataModel
}
listItemComponents: [
ListItemComponent {
type: "item"
StandardListItem {
id: noteItem
title: ListItemData.noteTitle
description: ListItemData.noteText
animations: [
ScaleTransition {
id: deleteAnimation
toY: 0
toX: 0
duration: 500
onEnded: {
noteItem.ListItem.view.dataModel.remove(noteItem.ListItem.view.dataModel.data(noteItem.ListItem.indexPath));
}
}
]
contextActions: [
ActionSet {
DeleteActionItem {
onTriggered: {
deleteAnimation.play();
}
}
}
]
}

Answer 1

The reason the issue is occurring is that the Cascades framework at times reuses objects for better performance. When you remove an item from the data model, and set its dimensions to zero, that object is held in memory for a time, with the dimension properties set to 0. The next item you add will reuse the removed item object, but with dimensions of 0, so it won't be visible.
To resolve this, change the animation's onEnded event and re-scale the item back to dimensions of 1.0 after removal:
onEnded: {
noteItem.ListItem.view.dataModel.remove(noteItem.ListItem.view.dataModel.data(noteItem.ListItem.indexPath));
noteItem.scaleX = 1.0;
noteItem.scaleY = 1.0;
}