How to animate when deleting item from list in NativeScript

Question

The delete occurs when the user taps the trash icon (android). When this icon is tapped the delete method is triggered on the item, updating the model, however, I am trying to add a fade out effect when an item is deleted but it seems to apply the effect twice. Once on the deleted item, and again on the item that is below in the list of groceries. I'm going based off of this tutorial: http://docs.nativescript.org/tutorial/chapter-0

list.xml:

<Page loaded="loaded">
    <Page.actionBar>
        <ActionBar title="Groceries">
            <ActionBar.actionItems>
                <ActionItem text="Share" tap="share" ios.position="right" />
            </ActionBar.actionItems>
        </ActionBar>
    </Page.actionBar>
    <GridLayout rows="auto, *" columns="2*, *">

        <TextField id="grocery" text="{{ grocery }}" hint="Enter a grocery item" row="0" col="0" />

        <Button text="Add" tap="add" row="0" col="1" />

        <ListView items="{{ groceryList }}" id="groceryList" row="1" colSpan="2">
           <ListView.itemTemplate>
                <GridLayout columns="*, auto">
                    <Label text="{{ name }}"/>
                    <Image src="res://ic_menu_delete" ios:visibility="collapsed" col="1" tap="delete" />
                </GridLayout>
            </ListView.itemTemplate>
        </ListView>
        <ActivityIndicator busy="{{ isLoading }}" rowSpan="2" colSpan="2" />
    </GridLayout>
</Page>

grocery-list-viewmodel.js:

var config = require("../../shared/config");
var fetchModule = require("fetch");
var ObservableArray = require("data/observable-array").ObservableArray;

function GroceryListViewModel(items) {
    var viewModel = new ObservableArray(items);

    viewModel.load = function() {
        return fetch(config.apiUrl + "Groceries", {
            headers: {
                "Authorization": "Bearer " + config.token
            }
        })
        .then(handleErrors)
        .then(function(response) {
            return response.json();
        }).then(function(data) {
            data.Result.forEach(function(grocery) {
                viewModel.push({
                    name: grocery.Name,
                    id: grocery.Id
                });
            });
        });
    };

    viewModel.empty = function() {
        while (viewModel.length) {
            viewModel.pop();
        }
    };

    viewModel.add = function(grocery) {
        return fetch(config.apiUrl + "Groceries", {
            method: "POST",
            body: JSON.stringify({
                Name: grocery
            }),
            headers: {
                "Authorization": "Bearer " + config.token,
                "Content-Type": "application/json"
            }
        })
        .then(handleErrors)
        .then(function(response) {
            return response.json();
        })
        .then(function(data) {
            viewModel.push({ name: grocery, id: data.Result.Id });
        });
    };

    viewModel.delete = function(index,ourList) {
        return fetch(config.apiUrl + "Groceries/" + viewModel.getItem(index).id, {
            method: "DELETE",
            headers: {
                "Authorization": "Bearer " + config.token,
                "Content-Type": "application/json"
            }
        })
        .then(handleErrors)
        .then(function() {
            ourList.animate({
                opacity: 0.5,
                duration: 500
            }).then(function(){
                viewModel.splice(index, 1);
            });
        });
    };

    return viewModel;
}

function handleErrors(response) {
    if (!response.ok) {
        console.log(JSON.stringify(response));
        throw Error(response.statusText);
    }
    return response;
}

module.exports = GroceryListViewModel;

list.js: (Code behind file snippet)

exports.delete = function(args) {
    var item = args.view.bindingContext;
    var index = groceryList.indexOf(item);
    var ourList = args.object.parent;
    console.log('index',index);
    console.log(ourList);

    groceryList.delete(index,ourList);
};

Answer 1

It's so much more work to do this manually for no reason, the telerik ui has a much more configurable listview that does this with a simple property...

http://docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/ListView/item-animations

and it's freeee!