oncontentanimating event

Hub.oncontentanimating event

Applies to Windows and Windows Phone

Raised when the Hub is about to play entrance, content transition, insert, or remove animations.

Syntax


<div 
    data-win-control="WinJS.UI.Hub" 
    data-win-options="{oncontentanimating : handler}">
</div>


function handler(eventInfo) { /* Your code */ }
 
// addEventListener syntax
hub.addEventListener("contentanimating", handler);
hub.removeEventListener("contentanimating", handler);


Event information

SynchronousNo
BubblesYes
CancelableYes

 

Event handler parameters

eventInfo

Type: CustomEvent

An object that contains information about the event. The detail property of this object contains the following sub-properties:

detail.type

The type of animation.

detail.index

The index of the animated section.

detail.section

The animated HubSection.

Remarks

Setting event handlers declaratively (in HTML)

To set the event handler declaratively, it must be accessible to the global scope, and you must also call WinJS.Utilities.markSupportedForProcessing or WinJS.UI.eventHandler on the handler. You can make the handler accessible to the global scope by using WinJS.Namespace.define. For more information, see How to set event handlers declaratively.

Examples

The following example shows how you can use the AnimationType property to do something when these animation events are raised, even how to cancel the animation.


        var hub = new WinJS.UI.Hub();
        hub.addEventListener("contentanimating", function (e) {
            if (e.detail.type === WinJS.UI.Hub.AnimationType.contentTransition) {
                // The hub wants to play a content transition animation. 
                // You can stop the animation by calling e.preventDefault() here.
                // Do something else here.
            } else if (e.detail.type === WinJS.UI.Hub.AnimationType.entrance) {
                // The hub wants to play an entrance animation. 
                // You can stop the animation by calling e.preventDefault() here.
                // Do something else here.
            } else if (e.detail.type === WinJS.UI.Hub.AnimationType.insert) {
                // The hub wants to play an insertion animation on a newly added hub section. 
                // You can stop the animation by calling e.preventDefault() here.
                // Do something else here.
            } else if (e.detail.type === WinJS.UI.Hub.AnimationType.remove) {
                // The hub wants to play a remove animation on a removed hub section. 
                // You can stop the animation by calling e.preventDefault() here.
                // Do something else here.
            }
        });


Requirements

Minimum WinJS version

WinJS 2.0

Namespace

WinJS.UI

See also

Hub
HubSection
AppBar
NavBar
BackButton
AnimationType
Your first app - Part 3: PageControl objects and navigation
Quickstart: Using a hub control for layout and navigation
Navigating between pages (HTML)
Adding app bars
Adding nav bars
HTML Hub control sample
HTML AppBar control sample
HTML NavBar control sample
Navigation and navigation history sample
Designers
Command patterns
Navigation patterns
Hub
Guidelines for the hub control

 

 

Show:
© 2017 Microsoft