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();
Minimum WinJS version
- Animating repositions
- Guidelines and checklist for reposition animations
- HTML animation library sample