Javascript 如何在NativeScript中从列表中删除项目时设置动画

当用户点击垃圾箱图标（android）时，会发生删除。当点击此图标时，项目上的删除方法被触发，更新模型。然而，当项目被删除时，我试图添加淡出效果，但它似乎应用了两次效果。一次是针对已删除的项目，另一次是针对食品杂货列表中下面的项目。我将根据本教程的内容：

list.xml：

list.js：（代码隐藏文件片段）

---

手动完成这项工作的工作量要大得多，telerik ui有一个可配置得多的listview，它使用一个简单的属性来完成这项工作

---

而且是免费的

这种联系在2020年就消失了

<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>

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;

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