Module Animation

Index

Interfaces

Functions

Functions

createAddToListAnimation(added: any, affected: any): IAnimationMethodResponse

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

Parameters

  • added: any

    Element or elements to add to the list.

  • affected: any

    Element or elements affected by the added items.

Returns

IAnimationMethodResponse

An object whose execute method is used to execute the animation. The execute method returns a Promise that completes when the animation is finished.

createAddToSearchListAnimation(added: any, affected: any): IAnimationMethodResponse

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

Parameters

  • added: any

    Element or elements to add to the list.

  • affected: any

    Element or elements affected by the added items.

Returns

IAnimationMethodResponse

An object whose execute method is used to execute the animation. The execute method returns a Promise that completes when the animation is finished.

createCollapseAnimation(hidden: any, affected: any): IAnimationMethodResponse

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

Parameters

  • hidden: any

    Element or elements hidden as a result of the collapse.

  • affected: any

    Element or elements affected by the hidden items.

Returns

IAnimationMethodResponse

An object whose execute method is used to execute the animation. The execute method returns a Promise that completes when the animation is finished.

createDeleteFromListAnimation(deleted: any, remaining: any): IAnimationMethodResponse

Creates an object that performs an animation that removes an item or items from a list.

Parameters

  • deleted: any

    Element or elements to delete from the list.

  • remaining: any

    Element or elements affected by the removal of the deleted items.

Returns

IAnimationMethodResponse

An object whose execute method is used to execute the animation. The execute method returns a Promise that completes when the animation is finished.

createDeleteFromSearchListAnimation(deleted: any, remaining: any): IAnimationMethodResponse

Creates an object that performs an animation that removes an item or items from a list of search results.

Parameters

  • deleted: any

    Element or elements to delete from the list.

  • remaining: any

    Element or elements affected by the removal of the deleted items.

Returns

IAnimationMethodResponse

An object whose execute method is used to execute the animation. The execute method returns a Promise that completes when the animation is finished.

createExpandAnimation(revealed: any, affected: any): IAnimationMethodResponse

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

Parameters

  • revealed: any

    Element or elements revealed by the expansion.

  • affected: any

    Element or elements affected by the newly revealed items.

Returns

IAnimationMethodResponse

An object whose execute method is used to execute the animation. The execute method returns a Promise that completes when the animation is finished.

createPeekAnimation(element: any): IAnimationMethodResponse

Creates an object that performs a peek animation.

Parameters

  • element: any

    Element or elements involved in the peek.

Returns

IAnimationMethodResponse

An object whose execute method is used to execute the animation. The execute method returns a Promise that completes when the animation is finished.

createRepositionAnimation(element: any): IAnimationMethodResponse

Creates an object that performs an animation that moves an item or items.

Parameters

  • element: any

    Element or elements involved in the reposition.

Returns

IAnimationMethodResponse

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.

crossFade(incoming: any, outgoing: any): Promise

Performs an animation that fades an item or items in, fading out existing items that occupy the same space.

Parameters

  • incoming: any

    Element or elements being faded in.

  • outgoing: any

    Element or elements being replaced.

Returns

Promise

An object that completes when the animation has finished.

dragBetweenEnter(target: any, offset: any): Promise

Performs an animation when a dragged object is moved such that dropping it in that position would move other items. The potentially affected items are animated out of the way to show where the object would be dropped.

Parameters

  • target: any

    Element or elements that the dragged object would cause to be moved if it were dropped.

  • offset: any

    Initial offsets where the animated objects begin relative to their final position at the end of the animation. Set this parameter to null to use the recommended default offset. Note When the incoming 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.

Returns

Promise

An object that completes when the animation is finished.

dragBetweenLeave(target: any): Promise

Performs an animation when a dragged object is moved away from items that it had previously involved in a dragBetweenEnter animation. The affected objects are animated back to their original positions.

Parameters

  • target: any

    Element or elements that the dragged object would no longer cause to be displaced, due to its moving away. This should be the same element or element collection passed as the target parameter in the dragBetweenEnter animation.

Returns

Promise

An object that completes when the animation is finished.

dragSourceEnd(dragSource: any, offset: any, affected?: any): Promise

Performs an animation when the user finishes dragging an object.

Parameters

  • dragSource: any

    Element or elements that were dragged.

  • offset: any

    Initial offset from the drop point. The dropped object begins at the offset and animates to its final position at the drop point. 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.

  • affected?: any optional

    Element or elements whose position the dropped object affects. Typically, this is all other items in a reorderable list. This should be the same element or element collection passed as the affected parameter in the dragSourceStart animation.

Returns

Promise

An object that completes when the animation is finished.

dragSourceStart(dragSource: any, affected?: any): Promise

Performs an animation when the user begins to drag an object.

Parameters

  • dragSource: any

    Element or elements being dragged.

  • affected?: any optional

    Element or elements whose position is affected by the movement of the dragged object. Typically, this is all other items in a reorderable list.

Returns

Promise

An object that completes when the animation is finished.

enterContent(incoming: any, offset: any, options?: any): Promise

Performs an animation that displays one or more elements on a page.

Parameters

  • incoming: any

    Element or elements that compose the incoming content.

  • offset: any

    Initial offsets where the animated objects begin relative to their final position at the end of the animation. Set this parameter to null to use the recommended default offset. Note When the incoming 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?: any optional

    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.

Returns

Promise

An object that completes when the animation is finished.

enterPage(element: any, offset: any): Promise

Performs an animation that shows a new page of content, either when transitioning between pages in a running app or when displaying the first content in a newly launched app.

Parameters

  • element: any

    Element or an array of elements that represent the content. If element refers to an array of elements, the elements enter in array order.

  • offset: any

    An initial offset where the element or elements begin relative to their final position at the end of the animation. Set this parameter to null to use the recommended default offset. 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.

Returns

Promise

An object that completes when the animation is finished.

exitContent(outgoing: any, offset: any): Promise

Performs an animation that hides one or more elements on a page.

Parameters

  • outgoing: any

    Element or elements that compose the outgoing content.

  • offset: any

    Initial offsets where the animated objects begin relative to their final position at the end of the animation. Set this parameter to null to use the recommended default offset. Note When the incoming 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.

Returns

Promise

An object that completes when the animation is finished.

exitPage(outgoing: any, offset: any): Promise

Performs an animation that dismisses the current page when transitioning between pages in an app.

Parameters

  • outgoing: any

    Element or elements that compose the outgoing page.

  • offset: any

    Initial offsets where the animated objects begin relative to their final position at the end of the animation. Set this parameter to null to use the recommended default offset. Note When the incoming 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.

Returns

Promise

An object that completes when the animation is finished.

fadeIn(shown: any): Promise

Performs an animation that fades an item or set of items into view.

Parameters

  • shown: any

    Element or elements being faded in.

Returns

Promise

An object that completes when the animation has finished. Use this object when subsequent actions need this animation to finish before they take place.

fadeOut(hidden: any): Promise

Performs an animation that fades an item or set of items out of view.

Parameters

  • hidden: any

    Element or elements being faded out.

Returns

Promise

An object that completes when the animation is finished.

hideEdgeUI(element: any, offset: any, options?: any): Promise

Performs an animation that hides edge-based user interface (UI).

Parameters

  • element: any

    Element or elements that are being hidden.

  • offset: any

    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 end the animation 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?: any optional

    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.

Returns

Promise

An object that completes when the animation is finished.

hidePanel(element: any, offset: any): Promise

Performs an animation that hides a panel.

Parameters

  • element: any

    Element or elements that are being hidden.

  • offset: any

    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 end the animation 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.

Returns

Promise

An object that completes when the animation is finished.

hidePopup(element: any): Promise

Performs an animation that removes pop-up user interface (UI).

Parameters

  • element: any

    Element or elements that are being hidden.

Returns

Promise

An object that completes when the animation is finished.

pointerDown(element: any): Promise

Performs an animation when a pointer is pressed on an object.

Parameters

  • element: any

    Element or elements on which the pointer is pressed.

Returns

Promise

An object that completes when the animation is finished.

pointerUp(element: any): Promise

Performs an animation when a pointer is released.

Parameters

  • element: any

    Element or elements that the pointer was pressed on.

Returns

Promise

An object that completes when the animation is finished.

showEdgeUI(element: any, offset: any, options?: any): Promise

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

Parameters

  • element: any

    Element or elements that are being shown.

  • offset: any

    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?: any optional

    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.

Returns

Promise

An object that completes when the animation is finished.

showPanel(element: any, offset: any): Promise

Performs an animation that slides a large panel user interface (UI) into view.

Parameters

  • element: any

    Element or elements that are being shown.

  • offset: any

    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.

Returns

Promise

An object that completes when the animation is finished.

showPopup(element: any, offset: any): Promise

Performs an animation that displays a pop-up user interface (UI).

Parameters

  • element: any

    Element or elements that are being shown.

  • offset: any

    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. Set this parameter to null to use the recommended default offset. 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.

Returns

Promise

An object that completes when the animation is finished.

swipeDeselect(deselected: any, selection: any): Promise

Performs a deselection animation in response to a swipe interaction.

Parameters

  • deselected: any

    Element or elements that become unselected.

  • selection: any

    Element or elements that represent the selection, typically a check mark.

Returns

Promise

An object that completes when the animation is finished.

swipeReveal(target: any, offset: any): Promise

Performs an animation that reveals an item or items in response to a swipe interaction.

Parameters

  • target: any

    Element or elements being revealed.

  • offset: any

    An initial offset where the animated objects begin relative to their final position at the end of the animation. Set this parameter to null to use the recommended default offset. Note When the incoming 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.

Returns

Promise

An object that completes when the animation is finished.

swipeSelect(selected: any, selection: any): Promise

Performs a selection animation in response to a swipe interaction.

Parameters

  • selected: any

    Element or elements being selected.

  • selection: any

    Element or elements that show that something is selected, typically a check mark.

Returns

Promise

An object that completes when the animation is finished.

updateBadge(incoming: any, offset: any): Promise

Performs an animation that updates a badge.

Parameters

  • incoming: any

    Element or elements that comprise the new badge.

  • offset: any

    Initial offsets where incoming animated objects begin relative to their final position at the end of the animation. Set this parameter to null to use the recommended default offset. Note When the incoming 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.

Returns

Promise

An object that completes when the animation is finished.