mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
4 KiB
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