How do you animate navigation in Windows 8 Metro Apps?

Question

In Metro apps that use HTML it is recommended to use fragments to navigate to different page (explained here).

How can you animate navigation between fragments without writing lots of code?

1) The navigate method is shown in many examples, but doesn't seem to have animation control:

WinJS.Navigation.navigate('/html/myNextPage.html');

2) The is a method WinJS.UI.Animation.enterPage, but do you have to give up navigate's history management to use this? Also the documentation is pretty sketchy still.

Shouldn't this be a one liner because it's such a common scenario?

Answer 1

WinJS has support for animations and does not interfere with Fragment navigation. Animations are visual effects that do not change history and are simple to use.

Typically you would do both at the same time:

1) Navigate to a new fragment using

WinJS.Navigation.navigate('/html/myPage.html');

2) Within myPage.js, the enterPage animation can be used:

WinJS.UI.ui.Pages.define("/html/myPage.html", {
    ready: function (element, options) {
        var offset = { top: "500px", left: "500px" };
        var el = document.getElementById("rootId")  // id of any element on myPage.html
        WinJS.UI.Animation.enterPage(el, offset);
    }
}

This will animate everything on the page, from position 500,500 to the final resting positions (assuming rootId is a containing all your other elements).

Answer 2

I just wanted to add that when you define the page, one of the functions is the getAnimationElements which you can use to animate elements in your page. e.g:

WinJS.UI.ui.Pages.define("/html/myPage.html", {
    ready: function (element, options) {

    },
    getAnimationElements: function () {
        var elements = [[this.element.querySelector("yourElement1")], [this.element.querySelector("yourElement2")]];
        return elements;
    },
}

Can read more about it here:

http://msdn.microsoft.com/en-us/library/windows/apps/hh972605.aspx