Creates an object that performs an animation that moves an item or items.
The following video demonstrates this animation:
Element or elements involved in the reposition.
An object whose execute method is used to execute the animation. The execute method returns a Promise object that completes when the animation is finished.
The element parameter 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 NodeList (for example, the result of querySelectorAll)
- As an HTMLCollection
The general usage pattern for layout animations such as this function is as follows:
- Call the create function (such as the one discussed on this page) and save the result.
- Change the document layout as necessary to represent the new state.
- 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.
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|
- Animating repositions
- Guidelines and checklist for reposition animations
- HTML animation library sample