Hub.oncontentanimating event

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
| Synchronous | No |
|---|---|
| Bubbles | Yes |
| Cancelable | Yes |
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