WinJS.UI.Animation.showEdgeUI function

Article
01/26/2017

Performs an animation that slides a narrow, edge-based user interface (UI) into view.

The following video demonstrates the hide and show edge UI animations:

Important The app bar control provided by Windows includes the edge UI animations. If you are using that control, you do not need to provide this animation yourself.

Syntax

WinJS.UI.Animation.showEdgeUI(element, offset, options).done( /* Your success and error handlers */ );

Parameters

element
Type: Object

Element or elements that are being shown.
offset
Type: Object

Initial offsets where the animated objects begin relative to their final position at the end of the animation. Offsets should be the chosen so that the elements begin the animation from just off-screen.

Note When the element parameter specifies an array of elements, the offset parameter can specify an offset array with each item specified for its corresponding element array item. If the array of offsets is smaller than the array of elements, the last offset is applied to all remaining elements.
options
Type: Object

Optional. Set this value to { mechanism: "transition" } to play the animation using CSS transitions instead of the default CSS animations. In some cases this can result in improved performance.

Return value

Type: Promise**

An object 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 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 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

The offset parameter can also be provided in several forms:

As the special value "undefined", which can be specified explicitly in the call or specified implicitly by omitting the parameter value. In the case of this animation, undefined means that no offset will be used.
As a single JavaScript object of this form:

{ top: string, left: string, rtlflip: true | false }

For example:

{ top: "12px", left: "0px", rtlflip: true }

The object must have properties named top and left that represent the offset applied at the beginning of the animation. Any valid CSS units can be used to express the offset. In this form, the offset applies to all elements involved in the animation.

The rtlflip parameter flips the values to a right-to-left alignment. It affects the left parameter and changes its sign. For instance, 10 px becomes -10px. This parameter is optional and can be omitted. If it is omitted, the default value is false.
As a JavaScript array (possibly empty) of the {top: ..., left: ..., rtlflip: ...} objects discussed above. In this case, each object in the array applies to a single element in the animation, in the order given; the first object applies to the first element, the second to the second, and so on. If the number of elements is greater than the number of objects in this array, then the last element in the array applies to all of the remaining elements.

Requirements

Minimum WinJS version	WinJS 1.0
Namespace	WinJS.UI.Animation

Share via