如何在Windows 8 Metro App中设置导航导航？

Question

在使用HTML的地铁应用中，建议使用片段导航到不同的页面（在这里解释）。

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

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中，可以使用extepage动画：

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是包含所有其他元素的一个）。

Answer 2

我只想添加它在定义页面时，其中一个函数是可用于在页面中的动画元素中的才能使用它。例如：

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

.

可以在这里阅读更多信息：

http://msdn.microsoft.com/zh-US / Library / Windows / Apps / HH972605.aspx