如何在Windows 8 Metro Apps中制作导航动画？

Question

在使用HTML的Metro应用程序中,建议使用片段导航到不同的页面(在此处说明).

如何在不编写大量代码的情况下为片段之间的导航设置动画？

1)导航方法在许多示例中显示,但似乎没有动画控件:

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

2)这是一个方法WinJS.UI.Animation.enterPage,但你是否必须放弃导航的历史管理才能使用它？此外,文档还很粗略.

这不应该是一个班轮,因为它是如此常见的情况？

Answer 1

WinJS支持动画,不会干扰片段导航.动画是不会改变历史并且易于使用的视觉效果.

通常你会同时做两件事:

1)使用导航到新片段

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

2)在myPage.js中,可以使用enterPage动画:

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);
    }
}

这将动画页面上的所有内容,从位置500,500到最终静止位置(假设rootId包含所有其他元素).