Animate manages PrimeFlex CSS classes declaratively to during enter/leave animations on scroll or on page load.
import { AnimateModule } from 'primeng/animate';
Animate uses PrimeFlex animations, however it can perform animations with custom CSS classes too. Takes enterClass and leaveClass properties to simply add animation class during scroll or page load to manage elements animation if the element is entering or leaving the viewport.
<div pAnimate enterClass="flip" leaveClass="fadeoutleft" class="flex justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-out">
<span class="text-900 text-3xl font-bold">flip</span>
</div>
API defines helper props, events and others for the PrimeNG Animate module.
Name | Type | Default | Description |
---|---|---|---|
enterClass | string | null | Selector to define the CSS class for enter animation. |
leaveClass | string | null | Selector to define the CSS class for leave animation. |