Animations
Various PrimeNG Components utilize native CSS animations to provide an enhanced user experience. The default animations are based on the best practices recommended by the usability experts. In case you need to customize the default animations, this documentation covers the entire set of built-in animations.
Introduction #
Various PrimeNG Components utilize native CSS animations to provide an enhanced user experience. The default animations are based on the best practices recommended by the usability experts. In case you need to customize the default animations, this documentation covers the entire set of built-in animations.
Animations are defined using a combination of style classes and keyframes. The .{classname}-enter-active and .{classname}-leave-active classes specify the animation name, duration, and easing function. You can customize animations globally by overriding the default animation classes, affecting all components. Alternatively, you can apply scoped classes to individual components to modify their animations independently. For demo purposes, this second approach is used throughout the next sections.
Anchored Overlays #
Anchored overlays are the components that have a floating ui positioned relatively to another element such as Select, Popover. The enter and leave animations are defined with the .p-anchored-overlay-enter-active and .p-anchored-overlay-leave-active classes.
Collapsibles #
Collapsible components have a content that is toggleable including Accordion, Panel, Fieldset, Stepper and PanelMenu. The enter and leave animations are defined with the .p-collapsible-enter-active and .p-collapsible-leave-active classes.
Dialog #
Overlays such as Dialog and Drawer are positioned relative to the viewport and have their own animations.
Disable #
Individual animations can be reduced and even disabled completely using the animation duration.
Reference #
List of class names of the CSS animations used by the components.
| Component | Enter Class | Leave Class |
|---|---|---|
| Accordion | .p-collapsible-enter-active | .p-collapsible-leave-active |
| AutoComplete | .p-anchored-overlay-enter-active | .p-anchored-overlay-leave-active |
| CascadeSelect | .p-anchored-overlay-enter-active | .p-anchored-overlay-leave-active |
| ColorPicker | .p-anchored-overlay-enter-active | .p-anchored-overlay-leave-active |
| ConfirmPopup | .p-anchored-overlay-enter-active | .p-anchored-overlay-leave-active |
| ContextMenu | .p-anchored-overlay-enter-active | .p-anchored-overlay-leave-active |
| DatePicker | .p-anchored-overlay-enter-active | .p-anchored-overlay-leave-active |
| Dialog | .p-dialog-enter-active | .p-dialog-leave-active |
| Drawer | .p-drawer-enter-active | .p-drawer-leave-active |
| Fieldset | .p-collapsible-enter-active | .p-collapsible-leave-active |
| Galleria | .p-galleria-enter-active | .p-galleria-leave-active |
| Image | .p-image-original-enter-active | .p-image-original-leave-active |
| Menu | .p-anchored-overlay-enter-active | .p-anchored-overlay-leave-active |
| Message | .p-message-enter-active | .p-message-leave-active |
| Modal Masks | .p-overlay-mask-enter-active | .p-overlay-mask-leave-active |
| MultiSelect | .p-anchored-overlay-enter-active | .p-anchored-overlay-leave-active |
| Panel | .p-collapsible-enter-active | .p-collapsible-leave-active |
| PanelMenu | .p-collapsible-enter-active | .p-collapsible-leave-active |
| Password | .p-anchored-overlay-enter-active | .p-anchored-overlay-leave-active |
| Select | .p-anchored-overlay-enter-active | .p-anchored-overlay-leave-active |
| Stepper | .p-collapsible-enter-active | .p-collapsible-leave-active |
| TieredMenu | .p-anchored-overlay-enter-active | .p-anchored-overlay-leave-active |
| Toast | .p-toast-message-enter-active | .p-toast-message-leave-active |
| TreeSelect | .p-anchored-overlay-enter-active | .p-anchored-overlay-leave-active |
