Transition Animation Overview

Compared with property animations, which work for components that are always present, transition animations are applied to animate the appearing or disappearing components. With transition animations, you are freed from the burdensome tasks of disappearing component management, which are unavoidable if you use property animations instead. With property animations, in addition to deleting the component in the animation completion callback, you would also need to add logic to check the component status in the callback, in case that the component that has been deleted appears again before the animation ends.

There are several types of transition animations:

• Enter/Exit transition: used on appearing and disappearing components. It is a basic type of transition.

• Modal transition: achieved by a modal – a view that appears on top of the current view while the current view remains. The dialog box is a typical type of modal.

• Shared element transition: achieved by animating the size and position between styles of the same or similar elements during page switching.

• Rotation transition animation: designed to create seamless visual transitions when the screen display orientation changes. There are two approaches to choose from: rotation transition animation with layout switching and rotation transition animation with opacity changing.

• Page transition animation: achieved by customizing the page transition effects through the pageTransition API. To achieve a better transition effect, you are advised to use the navigation transition and modal transition.

• Navigation transition: The route transition mode of the page corresponds to the animation effect when one page disappears and another page appears. For example, the level-1 menu of the setting application is switched to the level-2 page.