你如何在Windows 8地铁应用动画导航？ [英] How do you animate navigation in Windows 8 Metro Apps?

问题描述

在使用HTML地铁应用，建议使用片段来导航至不同的页面（<一href=\"http://msdn.microsoft.com/en-us/library/windows/apps/hh452768.aspx#navigation_models__multi-page_and_single-page\"相对=nofollow>在这里解释）。

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

你怎么能动画，而无需编写大量的code的片段之间的导航？

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

1）导航方法显示在很多例子，但似乎并没有让动画控件：

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

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

2）是一种方法WinJS.UI.Animation.enterPage，但你必须放弃浏览的历史记录管理使用呢？另外，文档pretty粗略仍。

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?

推荐答案

WinJS有支持动画和不分段导航干扰。动画的视觉效果不会改变历史，简单易用。

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）利用导航到一个新的片段

1) Navigate to a new fragment using

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

2）在myPage.js，该enterPage动画可以用：

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

这将动画网页上的一切，从500,500位置到最后的安息位置（假设rootId是一个包含所有其他元素）。

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).

这篇关于你如何在Windows 8地铁应用动画导航？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！