WinJS.UI.Animation.createDeleteFromListAnimation function

[This documentation is preliminary and is subject to change.]

Applies to: Metro style apps only

Creates an object that performs an animation that removes an item or items from a list.


var object = WinJS.UI.Animation.createDeleteFromListAnimation(deleted, remaining);



Type: Object

Element or elements to delete from the list.


Type: Object

Element or elements affected by the removal of the deleted items.

Return value

Type: Object

An object whose execute method is used to execute the animation. The execute method returns a Promise that completes when the animation is finished.


See the Using the Animation Library animations sample on the Windows Dev Center for a usage example of this function.

The parameters of this method can be expressed in several ways:

  • As the special value "undefined", which means that the animation has no such target
  • As a single object
  • As a JavaScript array (possibly empty), in which each element of the array can be a single element or a JavaScript array of elements.
  • As a NodeList (for example, the result of querySelectorAll)
  • As an HTMLCollection

If you want to remove an element involved in this animation from the document altogether, doing so before the animation is complete causes the animation to abruptly stop. You should use the Promise to be notified when the animation completes and then remove the element from the document.

The general usage pattern for layout animations such as this function is as follows:

  1. Call the create function (such as the one discussed on this page) and save the result.
  2. Change the document layout as necessary to represent the new state.
  3. Call the execute method on the object you saved in step 1 to perform the animation.

The following code shows an example.

// Step 1: Create the animation object and save the result
var anim = WinJS.UI.Animation.createAddToListAnimation(added, affected);

// Step 2: Insert the element given in the added parameter immediately before
// the element given in the affected parameter. This causes both elements to move.
affected.parentNode.insertBefore(added, affected);

// Step 3: Execute the animation

// Step 4: When animation completes, remove the deleted items from the screen
anim.execute().then(function(){ deleted.parentNode.removeChild(deleted); });

Note  The execute method can be invoked only once on the animation object created by the function. To perform multiple animations, create multiple animation objects and execute each one separately.


Minimum supported client

Windows 8 Consumer Preview

Minimum supported server

Windows Server 8 Beta





See also

Guidelines and checklist for list animations
Using the Animation Library animations sample



Build date: 2/10/2012

Ajouts de la communauté

© 2016 Microsoft