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

Question

删除发生在用户点击垃圾桶图标 (android) 时。当点击此图标时，将在项目上触发删除方法，更新模型，但是，我试图在删除项目时添加淡出效果，但它似乎应用了两次效果。一次在已删除的项目上，然后再次在杂货列表下方的项目上。我将基于本教程: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:(文件 fragment 后面的代码)

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

无缘无故地手动执行此操作需要做更多的工作，telerik ui 有一个更可配置的 ListView ，它使用一个简单的属性来执行此操作...

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

而且是免费的!