Use content transition animations to change the content of an area of the screen while keeping the container or background constant. New content coming onto the screen slides in from an offset as it fades in. If there is existing content to be replaced, the old content is faded out as the new content is coming in. You will typically use this in the case of split-screen navigation, where the user is shown a list and a detailed view. Content transition animations also bring content into view that loads after the rest of a page, when the app transitions between pages.
This set of animations consists of the following APIs:
The following video demonstrates the animations that remove existing content and then bring new content into view:
Note that the original content and the replacement content don't need to have the same layout or size.
To use the content transition APIs, you'll need to know:
- The outgoing objects
- The incoming objects
- The distance and direction that incoming content will slide as it enters.
- The recommended distance is 40 pixels.
Other resources
See the Using the Animation Library animations sample for code examples that demonstrate the use of the content transition animation APIs.
See Guidelines and checklist for content transition animations for design best practices in the use of these animations.
Related topics
Build date: 3/5/2013
