Question

在使用HTML的Metro应用中，建议使用片段导航到不同的页面（explained here）。

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

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

Answer 2

我只想添加一下，当您定义页面时，其中一个函数是getAnimationElements，您可以使用它来为页面中的元素设置动画。 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;
    },
}

可以在这里阅读更多相关内容：

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

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

2 个答案: