author | Description | title | ms.assetid | label | template | ms.author | ms.date | ms.topic | ms.prod | ms.technology | keywords | ms.localizationpriority |
---|---|---|---|---|---|---|---|---|---|---|---|---|
mijacobs |
Use fade animations to bring items into a view or to take items out of a view. The two common fade animations are fade-in and fade-out. |
Fade animations in UWP apps |
975E5EE3-EFBE-4159-8D10-3C94143DD07F |
Motion--fades |
detail.hbs |
mijacobs |
05/19/2017 |
article |
windows |
uwp |
windows 10, uwp |
medium |
Use fade animations to bring items into a view or to take items out of a view. The two common fade animations are fade-in and fade-out.
Important APIs: FadeInThemeAnimation class, FadeOutThemeAnimation class
- When your app transitions between unrelated or text-heavy elements, use a fade-out followed by a fade-in. This allows the outgoing object to completely disappear before the incoming object is visible.
- Fade in the incoming element or elements on top of the outgoing elements if the size of the elements remains constant, and if you want the user to feel that they're looking at the same item. Once the fade-in is complete, the outgoing item can be removed. This is only a viable option when the outgoing item will be completely covered by the incoming item.
- Avoid fade animations to add or delete items in a list. Instead, use the list animations created for that purpose.
- Avoid fade animations to change the entire contents of a page. Instead, use the page transition animations created for that purpose.
- Fade-out is a subtle way to remove an element.
- Animations overview
- Animating fades
- Quickstart: Animating your UI using library animations
- FadeInThemeAnimation class
- FadeOutThemeAnimation class