In Angular’s legacy animation DSL, define a reusable animation with animation(), export it from a TypeScript module, and invoke it in a component transition with useAnimation(). For new enter-and-leave effects, Angular now recommends CSS with animate.enter and animate.leave: the legacy animation package is deprecated, and Angular’s API reference says the two reusable-animation functions were deprecated in v20.2 with removal intended for v23—not yet a completed removal.
How reusable animations work in the legacy DSL
A reusable animation is a shared metadata definition, not a component trigger by itself. Define its steps once, export the reference, then call it from a component’s trigger and transition. Placeholders let each call supply its own timing or style values.
As an Amazon Associate I earn from qualifying purchases.
- Define and export the animation. In a TypeScript module, compose steps with helpers such as
style()andanimate(), wrap them inanimation(), and export the result. - Add parameters where callers need variation. Use placeholders such as
{{ time }}in a timing value or{{ opacity }}in a style value. The official guide’s example also demonstrates height and background-color parameters; its particular values are illustrative, not required design choices. Angular’s reusable animations guide shows the full definition and call-site pattern. - Invoke it from a component transition. Import the exported reference and pass it to
useAnimation()inside a transition in the component’s animation metadata. Supply aparamsobject with values for the placeholders used by the definition. - Set defaults if they make sense. Defaults on the definition can cover common values; invocation parameters override them. If a required placeholder has neither a supplied value nor a default, Angular documents that invocation as an error. See the animation API reference and useAnimation API reference.
This structure is useful when an existing application uses Angular’s legacy animation metadata and several transitions need the same steps with different parameter values.
Recommended Free Tools
What to use for new enter-and-leave effects
Angular’s current direction for new work is CSS, using the compiler-supported animate.enter and animate.leave APIs. They apply CSS classes when an element enters or leaves the DOM, or can call a function to use an animation library. Consult the current animations guide for the supported enter-and-leave workflow.
#1 Best Overall
These APIs are specifically documented for element entry and removal. The documentation does not establish that they replace every sequencing or coordination feature in the legacy DSL, so choose based on what the effect needs rather than assuming feature-for-feature equivalence.
| Situation | Approach indicated by Angular’s documentation | Important boundary |
|---|---|---|
| New effect tied to an element entering or leaving | CSS with animate.enter or animate.leave |
These APIs cover enter and leave behavior; the cited guidance does not claim parity with every legacy DSL feature. |
| Existing code shares parameterized legacy animation steps | animation() and useAnimation() describe the legacy reuse pattern |
Both functions are documented as deprecated in v20.2, with removal intended in v23. |
| Nested legacy component animations need coordination | Use the legacy child-animation mechanism where applicable | animateChild() is for Angular-library animations with query(); it does not handle CSS keyframes or transitions. |
The legacy package deprecation and recommended direction are stated in the legacy animations overview. The v20.2 deprecation and v23 removal intent are recorded in the animation API reference and useAnimation API reference. Removal is an intention in that documentation, not evidence that the API has already been removed.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Why a child animation may not run
In the legacy animation system, an animation on a parent can take priority and block animations on its children. If a parent transition needs to coordinate child animations, Angular’s documented pattern is to query the child animation elements and run them with animateChild().
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsThis is a legacy Angular animation-library mechanism, not a general way to launch CSS keyframes or transitions. The transition guide explains parent-child handling; the animateChild API reference describes its scope and its use with query().
Quick Recap
Rank #3
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
