Animating page transitions (Windows Store apps using JavaScript and HTML)

Language: JavaScript and HTML | VB/C#/C++ and XAML
This topic has not yet been rated - Rate this topic

Use page transition animations to display the first page of a newly launched app, or to transition between pages within an app. The new page slides into place from an offset as it fades in. The existing content fades out as the new content fades in. The new page is split into regions, and each region moves onto the screen separately, with staggered timings. You specify how the incoming page is split into regions.

This set of animations consists of the following APIs:

The following video demonstrates the animation that brings a page of content into view:

|

The following video demonstrates the animation that removes a page of content from view:

|

To use these animations, you'll need to know:

  • The outgoing objects
  • The incoming objects.
  • The distance and direction that the incoming content will slide as it enters.
    • The recommended distance is 100 pixels.
    • The recommended direction is the opposite of the reading order.

Other resources

See the Using the Animation Library animations sample for code examples that demonstrate the use of the page transition animation APIs.

See Guidelines and checklist for page transition animations for design best practices in the use of these animations.

Related topics

Animating your UI
Animating content transitions
enterPage
exitPage

 

 

Build date: 3/5/2013

Did you find this helpful?
(1500 characters remaining)
© 2013 Microsoft. All rights reserved.