angular/aio/content/guide/animation-api-summary.md
2022-12-09 15:06:50 -08:00

4 KiB

Animation API summary

The functional API provided by the @angular/animations module provides a domain-specific language DSL for creating and controlling animations in Angular applications. See the API reference for a complete listing and syntax details of the core functions and related data structures.

Function name What it does
trigger() Kicks off the animation and serves as a container for all other animation function calls. HTML template binds to triggerName. Use the first argument to declare a unique trigger name. Uses array syntax.
style() Defines one or more CSS styles to use in animations. Controls the visual appearance of HTML elements during animations. Uses object syntax.
state() Creates a named set of CSS styles that should be applied on successful transition to a given state. The state can then be referenced by name within other animation functions.
animate() Specifies the timing information for a transition. Optional values for delay and easing. Can contain style() calls within.
transition() Defines the animation sequence between two named states. Uses array syntax.
keyframes() Allows a sequential change between styles within a specified time interval. Use within animate(). Can include multiple style() calls within each keyframe(). Uses array syntax.
group() Specifies a group of animation steps *inner animations* to be run in parallel. Animation continues only after all inner animation steps have completed. Used within sequence() or transition().
query() Finds one or more inner HTML elements within the current element.
sequence() Specifies a list of animation steps that are run sequentially, one by one.
stagger() Staggers the starting time for animations for multiple elements.
animation() Produces a reusable animation that can be invoked from elsewhere. Used together with useAnimation().
useAnimation() Activates a reusable animation. Used with animation().
animateChild() Allows animations on child components to be run within the same timeframe as the parent.

@reviewed 2022-10-28