In case anyone else is having this issue and finds this post, I have worked out enterPage. So here is how to use it with the fragments you just created in the above tutorial:
enterPage
Quite simply, this goes in your default.js file in the function that handles the loading of your fragments (in the above tutorial it was called loadPage). This is the function whose first line is something like this:
WinJS.UI.Fragments.clone(location, state).then(function (frag) {
A queueEvent for your animation needs to be added after the queueEvent type "fragmentappended" and it can be named whatever you want:
WinJS.Application.queueEvent({ type: "elementAnimation" });
you will also need to add the listener. This will go above the fragmentappended queue event:
WinJS.Application.addEventListener("elementAnimation", listener);
After this point, the end of your loadPage, function will look like this:
WinJS.Application.addEventListener("elementAnimation", listener);
WinJS.Application.queueEvent({ type: "fragmentappended", location: location, fragment: content, state: state });
WinJS.Application.queueEvent({ type: "elementAnimation" });
Now the listener needs to be defined. This will go above the event listener you just added:
// Define a listener that fires when the fragmentappended event finishes
var listener = function handler(e) {
var animateSectionsIn = document.getElementById("animatedElement");
WinJS.UI.Animation.enterPage(animateSectionsIn);
WinJS.Application.removeEventListener("animatedElement", listener);
}
Now, what does this do? First an element is searched for by ID. It looks for an element named "animatedElement" on the fragment being loaded. It then calls the enterPage animation on this element resulting in your enterPage animation. The listener is then removed.
The Important part? For one simple animation, make sure every one of your html fragments are enclosed in a div layer called "animatedElement". Thats it. When you navigate your fragments will animate in.
