如何在NativeScript中從列表中刪除項目時進行動畫

當用戶點擊垃圾桶圖標（android）時發生刪除。當點擊這個圖標時，在該項目上觸發刪除方法，更新模型，但是，我試圖添加一個淡出效果，當一個項目被刪除，但它似乎應用兩次效果。一旦在刪除的項目上，並再次在雜貨列表中的項目下面。基於關本教程我要去：http://docs.nativescript.org/tutorial/chapter-0 如何在NativeScript中從列表中刪除項目時進行動畫

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>

雜貨店列表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 ：（代碼後面的文件片段）

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

來源

2016-05-12 Gabriel