An Angular animation trigger is a named group of state and transition rules, attached to a template element through a binding. A transition decides when animation steps run as the bound value changes. The legacy @angular/animations APIs are deprecated since Angular v20.2, and Angular says it intends to remove them in v23; for new enter-and-leave effects, the framework recommends CSS with animate.enter and animate.leave.
How triggers, states, and transitions fit together
A trigger defines the animation behavior for an element. It groups named states and transition rules, then a template binding supplies the value that Angular watches. Angular converts that bound value to a string when matching it against declared states.
As an Amazon Associate I earn from qualifying purchases.
trigger('panelMotion', [
state('open', style({ opacity: 1 })),
state('closed', style({ opacity: 0 })),
transition('open => closed', animate('200ms')),
transition('closed => open', animate('200ms')),
])In a template, bind the trigger with its name prefixed by @:
<section [@panelMotion]="panelState">...</section>Here, panelState supplies values such as open and closed. A state() declaration associates a state name with styles; once that state is reached, its styles remain on the element. A transition() declaration provides animation instructions when a matching change occurs. See Angular’s trigger API and state API.
#1 Best Overall
Which transition expressions match a change?
A transition expression describes the state change it accepts. The transition rules are evaluated in declaration order, so put narrow matches before a catch-all rule.
| Expression | What it matches | When it is useful |
|---|---|---|
open => closed |
A change from open to closed only. |
When the two directions need different animation steps. |
open <=> closed |
Changes in either direction between those two states. | When both directions share the same transition instructions. |
* => * |
Any change from one state to another. | As a general fallback after more specific rules. |
:enter or :leave |
An element entering or leaving the view. | For legacy trigger-based effects tied to view insertion or removal. |
:increment or :decrement |
A numeric value increasing or decreasing. | When an animation responds to a numeric change. |
The wildcard state * matches any state, while void represents an element detached from the application. A transition matcher can also be a function for custom matching logic. The Angular transition and trigger guide documents the legacy matching syntax.
Order specific rules before a wildcard fallback
Because rules are matched in order, a broad * => * declaration can catch a change before a later, more specific declaration gets a chance to handle it. Put explicit state-pair rules first and the catch-all last.
How to animate elements entering or leaving
For new code, use Angular’s compiler-supported animate.enter and animate.leave APIs. They apply CSS classes at the relevant point in an element’s lifecycle, or can call functions for integrations with third-party animation systems. The framework’s enter and leave guide provides the current approach.
Rank #3
For many effects, a class change plus CSS is enough. CSS transitions interpolate between styles, while CSS keyframes describe a sequence of intermediate styles. Angular’s CSS animation guide explains handling state changes by toggling classes and styling those classes with transitions or keyframes.
How to choose an approach for a new or existing animation
- New enter-or-leave effect: Use
animate.enteroranimate.leavewith CSS classes, following Angular’s current guidance. - Existing trigger with state-dependent styling: Identify the states, the styles that must persist at the end, and the transitions between them. Recreate that behavior with class changes and CSS where appropriate.
- Simple change between visual states: A CSS transition is often suitable when the effect is an interpolation between start and end styles.
- Several timed stages: CSS keyframes can express a sequence of intermediate styles.
- Complex sequences or nested legacy triggers: Review the exact behavior before migrating. Angular’s documentation does not prescribe one automatic, universal conversion for every legacy animation.
The choice depends on whether an effect follows DOM insertion or removal, whether end-state styles must persist, and how much sequencing or nesting it requires. Retaining legacy syntax may be necessary while maintaining existing code, but it is not Angular’s recommended direction for new animations.
What happens with nested legacy triggers?
A parent legacy animation takes priority and blocks animations on child elements unless the parent explicitly queries those child elements and invokes animateChild(). This matters when a child has its own trigger: the child animation may not run merely because its state changes while the parent animation is active. The legacy guide also covers start and done callbacks and keyframe sequences.
Are Angular animation triggers deprecated?
Yes. Angular marks the legacy @angular/animations APIs as deprecated since v20.2. The transition() API reference says to use animate.enter or animate.leave instead and records an intent to remove the API in v23. Angular’s legacy guide likewise recommends native CSS with those APIs for all new code. Because the stated removal plan is version-sensitive, check the current transition API reference when planning an upgrade.
Quick Recap
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.
