1e41f4b71Sopenharmony_ci# Transition Animation Overview 2e41f4b71Sopenharmony_ci 3e41f4b71Sopenharmony_ci 4e41f4b71Sopenharmony_ciCompared with [property animations](arkts-attribute-animation-overview.md), 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. 5e41f4b71Sopenharmony_ci 6e41f4b71Sopenharmony_ci 7e41f4b71Sopenharmony_ciTransition animations are classified into basic transition animations and advanced, template-based transition animations. They come in any of the following types: 8e41f4b71Sopenharmony_ci 9e41f4b71Sopenharmony_ci 10e41f4b71Sopenharmony_ci- [Enter/Exit transition](arkts-enter-exit-transition.md): used on appearing and disappearing components. It is a basic type of transition. 11e41f4b71Sopenharmony_ci 12e41f4b71Sopenharmony_ci- [Navigation transition](arkts-navigation-transition.md): used during page navigation, where one page disappears and another page appears. For example, it can be used for switching from a level-1 menu page to a level-2 details page. 13e41f4b71Sopenharmony_ci 14e41f4b71Sopenharmony_ci- [Modal transition](arkts-modal-transition.md): 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. 15e41f4b71Sopenharmony_ci 16e41f4b71Sopenharmony_ci- [Shared element transition](arkts-shared-element-transition.md): achieved by animating the size and position between styles of the same or similar elements during page switching. 17e41f4b71Sopenharmony_ci 18e41f4b71Sopenharmony_ci- [Page transition animation (not recommended)](arkts-page-transition-animation.md): achieved by customizing the page transition effects through the **pageTransition** API. To achieve a better transition effect, you are advised to use the [Navigation](arkts-navigation-transition.md) component and [modal transition](arkts-modal-transition.md). 19e41f4b71Sopenharmony_ci 20e41f4b71Sopenharmony_ci- [Screen rotation animation enhancement](arkts-rotation-transition-animation.md): achieved by adding custom fade-in and fade-out transition effects to a screen rotation animation. 21