mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
26 lines
4 KiB
Markdown
26 lines
4 KiB
Markdown
# Animation API summary
|
|
|
|
<!-- vale off -->
|
|
|
|
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](api/animations) for a complete listing and syntax details of the core functions and related data structures.
|
|
<!-- vale on -->
|
|
| 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()`](api/animations/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()`](api/animations/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. |
|
|
|
|
</table>
|
|
|
|
@reviewed 2022-10-28
|