Guidelines and checklist for fade animations (Windows Store apps) (Windows)

This topic has not yet been rated - Rate this topic

This topic describes best practice recommendations that you should apply when you use the fade animations.

When your app transitions between unrelated or text-heavy elements, use a fade out followed by a fade in instead of a crossfade. This allows the outgoing object to disappear completely before the incoming object is visible. Crossfading lots of text, in particular, is not recommended.
Use the crossfade animation to transition between elements of different sizes or when you refresh a large area. In the middle of the animation, both the incoming and outgoing elements will be semitransparent and the background will be visible to the user. Note that programming languages used with Extensible Application Markup Language (XAML) do not contain a dedicated crossfade animation. In those languages, you can achieve the effect by using the fade in and fade out animations with overlapped timing.
Fade in the incoming element or elements on top of the outgoing elements, if the elements' size remains constant and you want the user to feel that they're looking at the same item. You can fade in the incoming item on top of the outgoing item. Then, once the fade in is complete, the outgoing item can be simply removed. Of course this is only a viable option when the outgoing item will be completely covered by the incoming item. This method also prevents the background from becoming visible during the transition.

Don't use fade animations to add or delete items in a list. Use the add and delete animations created specifically for that purpose.
Don't use fade animations to change the entire contents of a page. Use the page transition animations created specifically for that purpose.

For general Windows Store requirements, see Certification requirements for Windows apps.

Guidelines and checklist for fade animations (Windows Store apps)