iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
An Angular animation trigger groups named states and transitions, while a template binding supplies the value that changes. The legacy @angular/animations APIs are deprecated since Angular v20.2, with intent to remove them in v23; Angular recommends native CSS with animate.enter and animate.leave for new code. That makes the legacy model useful to understand when maintaining or migrating existing animations, but not the default choice for new enter-and-leave effects.
How triggers, states, and transitions fit together
A trigger names an animation definition. It groups state() declarations, which associate styles with named states, and transition() declarations, which specify what to do when the bound value changes. In a template, the trigger is bound with syntax such as [@panelState]="currentState". Angular converts trigger-bound values to strings when matching them.
When a transition reaches a state, that state’s styles persist on the element. A transition supplies animation steps for moving between matched states; it does not replace the state’s role in defining the resulting style.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Angular describes trigger() as creating a named trigger containing state and transition entries evaluated when its bound expression changes. See the trigger API reference and state API reference.
#1 Best Overall
How Angular matches transition expressions
A transition expression determines which state changes run a set of animation instructions. The direction and breadth of the match matter:
| Expression or matcher | What it matches | When it is useful |
|---|---|---|
open => closed |
A change from open to closed only. |
When the two directions should behave differently. |
open <=> closed |
Changes between open and closed in either direction. |
When both directions share the same transition behavior. |
* => * |
Any state change. | As a broad fallback after more specific rules. |
:enter or :leave |
An element entering or leaving the view. | For insertion and removal behavior in the legacy animation DSL. |
:increment or :decrement |
A numeric value increasing or decreasing. | For transitions that respond to a numeric change. |
| A function matcher | A change satisfying the function’s matching logic. | When the built-in expressions do not describe the desired match. |
The legacy guide documents these matchers and their behavior in Animation transitions and triggers and the transition API reference.
Order specific rules before fallbacks
Angular evaluates transition declarations in order. Put specific state pairs or other narrow matches before a catch-all such as * => *; otherwise, the broad rule can match first and prevent the more specific transition from being used.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Wildcard and void states
The * wildcard stands for a state value broadly, while void represents an element detached from the application. The legacy DSL also provides :enter and :leave aliases for entering and leaving the view. These are related ideas, but they are not interchangeable: use the entry/exit match for lifecycle behavior and state expressions for changes to a bound value.
Rank #3
What happens with nested animation triggers
In the legacy API, a parent animation takes priority and blocks animations on child elements by default. To run a child animation as part of the parent sequence, the parent must query the child elements and invoke animateChild(). This interaction matters when a trigger appears to match correctly but a nested effect does not run. Angular documents the behavior in its legacy transition and trigger guide.
The legacy API also supports start and done callbacks and keyframe sequences. These capabilities can make an existing animation more involved than a simple state change, so assess the full behavior before replacing a trigger with CSS.
What to use for new animations
Angular’s current guidance is to use native CSS with animate.enter and animate.leave for new enter-and-leave animations. These APIs apply CSS classes at the appropriate time or can call functions for integrations with third-party animation tools. For state changes, Angular’s CSS guide describes changing styles by toggling classes and using CSS transitions or keyframes.
| Approach | Best fit | Considerations |
|---|---|---|
| Legacy trigger DSL | Maintaining existing animations that use named states, transition matchers, callbacks, keyframes, or nested trigger coordination. | The package is deprecated since v20.2, and Angular states an intent to remove it in v23. Avoid starting new work on this API. |
animate.enter and animate.leave |
New animations tied to an element entering or leaving the view. | They apply CSS classes at the lifecycle point or invoke a function for an integration. |
| CSS classes with transitions | State changes whose styles can be represented as class changes and a smooth transition between styles. | Persistent visual states should be represented in CSS and the classes that remain applied. |
| CSS keyframes | A sequenced visual effect that is better expressed as a keyframe animation. | Choose it when the effect calls for keyframe sequencing rather than a simple transition between class styles. |
Angular’s Enter and Leave animations guide recommends the compiler-supported APIs, and Complex Animations with CSS explains CSS-based state changes. Angular’s API reference marks transition() deprecated since v20.2 and says the intent is to remove it in v23. Those version statements are time-sensitive; check the current Angular documentation when planning an upgrade.
How to approach migrating an existing trigger
There is no single mechanical replacement established for every legacy trigger. Choose a replacement based on what the animation actually does rather than translating syntax line by line.
- Identify the event. Determine whether the effect responds to a value changing while the element remains present, or to the element being inserted or removed from the view.
- Record the visual states. Note which styles persist after each change, and which styles are only part of the movement between states.
- Choose a CSS model. Use class changes with CSS transitions for straightforward state changes; use CSS keyframes when the effect needs a sequence; use
animate.enteroranimate.leavefor new DOM entry and removal behavior. - Check special behavior. Account for directional transitions, wildcard fallbacks, nested triggers, callbacks, and keyframes before removing the legacy definition.
- Verify the result in the application. Confirm that the end styles persist as intended and that entry, removal, and any sequencing behave correctly after the replacement.
The distinction between lifecycle-driven effects and persistent state styling is especially important: an entry or exit API addresses when an element appears or disappears, while CSS classes can represent a lasting state after a state change.
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.
Recommended Free Tools
