WinJS.UI.Animation.createCollapseAnimation function

Creates an object that performs an animation that collapses a list.

The following video demonstrates the expand and collapse animations:

Syntax

var object = WinJS.UI.Animation.createCollapseAnimation(hidden, affected);

Parameters

hidden

Type: Object

Element or elements hidden as a result of the collapse.

affected

Type: Object

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

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)
• 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.
3. Call the execute method on the object you saved in step 1 to perform the animation.

The following code shows an example.

// Create the collapse animation.
var collapseAnimation = WinJS.UI.Animation.createCollapseAnimation(element, affected);

// Remove the collapsing item from the document flow so that affected items reflow 
// to their new position.
// Do not remove the collapsing item from the DOM or display at this point, or the 
// animation on the collapsing item will not display.
element.style.position = "absolute";
element.style.opacity = "0";

// Execute the collapse animation.
collapseAnimation.execute().then(
    // After the animation is complete (or on error), remove from the item from the display.
    function () { element.style.display = "none"; },
    function () { element.style.display = "none"; }
);

Requirements

See also

HTML animation library sample