EN
Dieser Inhalt ist in Ihrer Sprache leider nicht verfügbar. Im Folgenden finden Sie die englische Version.

WinJS.UI.Animation.createAddToListAnimation function

Applies to Windows and Windows Phone

Creates an object that performs an animation that adds an item or items to a list.

The following video demonstrates both the create and delete animations:

Syntax


var object = WinJS.UI.Animation.createAddToListAnimation(added, affected);

Parameters

added

Type: Object

Element or elements to add to the list.

affected

Type: Object

Element or elements affected by the added 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.

Remarks

See the HTML animation library 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) of elements.
  • As a NodeList (for example, the result of querySelectorAll) (for example, the result of querySelectorAll)
  • As an HTMLCollection

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. The items you add must be visible and have layout.
  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
anim.execute();

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.

Requirements

Minimum supported client

Windows 8 [Windows Store apps only]

Minimum supported server

Windows Server 2012 [Windows Store apps only]

Minimum supported phone

Windows Phone 8.1

Namespace

WinJS.UI.Animation

Library

Ui.js

See also

createDeleteFromListAnimation
createAddToSearchListAnimation
Animating list additions and deletions
Guidelines and checklist for list animations
HTML animation library sample

 

 

Anzeigen:
© 2014 Microsoft