Use pop-up animations to show and hide popup UI, which includes context menus and Flyouts. Pop-up elements are containers that appear over the app's content and are dismissed if the user taps or clicks outside of the pop-up element.
This set of animations consists of the following APIs:
The following video demonstrates the animations that show and hide pop-up UI:
Note The Windows context menu and Flyout controls include the pop-up animations. If you use these controls in your app, you do not need to provide those animations yourself.
The showPopup animation includes a translation, which is a vertical movement from an initial position to the final position as the pop-up element fades in. The translation distance and direction is specified by the app. In most cases, the translation should be 50 pixels, moving in an upwards direction. However, if the pop-up element will be displayed below the UI element that triggered the pop-up, then the translation should be 50 pixels, moving downwards. For example, this downward translation would apply to a Flyout triggered from a top app bar or from an app header. This is meant to give the user a visual link between the pop-up element and its triggering element.
To use the pop-up animations, you'll need to know the object that will appear or disappear and, in the case of showPopup, the offset from which the object will move while it appears.
Other resources
See the Using the Animation Library animations sample for code examples that demonstrate the use of the pop-up UI animation APIs.
See Guidelines and checklist for pop-up UI animations for design best practices in the use of these animations.
Related topics
Build date: 3/5/2013
