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
Use Angular’s compiler-supported animate.enter and animate.leave APIs to animate elements as they enter or leave the DOM. For straightforward motion, attach CSS animation classes; for JavaScript libraries or other programmatic control, bind an event callback and explicitly tell Angular when a leave animation is finished.
How Angular enter and leave animations work
animate.enter and animate.leave are compiler-supported APIs, not directives. You can use them on elements or as host bindings. They add CSS classes during an element’s entry or exit; Angular removes completed enter classes and waits for leave animations before removing the departing element. See Angular’s Enter and Leave animations guide.
For conditional content, the element must actually be created or removed for the corresponding animation to run. The modern control-flow syntax provides a simple example:
Recommended Free Tools
@if (isShown()) {
<div animate.enter="fade-in">Content</div>
}When isShown() becomes true, Angular creates the element and applies the fade-in class. Define that class in the component stylesheet using a CSS animation or transition. Angular removes the enter class when its animation finishes. If multiple animations or transition properties apply, it waits for the longest one.
#1 Best Overall
Animate an element leaving the DOM
Put animate.leave on the element whose removal is triggered. Angular retains that element until its leave animation completes:
@if (isShown()) {
<div animate.leave="fade-out">Content</div>
}Define fade-out in CSS with the animation or transition you want. When the condition becomes false, Angular applies the class, waits for the longest applicable animation or transition, and then removes the element.
Choose CSS classes or a callback
CSS classes are the direct choice for ordinary fades, movement, and other styling-led effects. Use an event binding when application code or a JavaScript animation library needs to control the motion. For leave callbacks, the key requirement is to notify Angular when the asynchronous animation is done.
CSS-driven motion
Use a class name with animate.enter or animate.leave, and define the class in CSS. Angular manages the class lifecycle and, for leave, delays removal until the relevant CSS motion finishes.
Rank #3
Programmatic leave motion
Bind the leave event and call animationComplete() after the animation finishes:
<div (animate.leave)="leavingFn($event)">Content</div>leavingFn(event: AnimationCallbackEvent) {
// Run the animation, then signal that it has finished.
event.animationComplete();
}The callback event provides the target element and the completion function. If a callback never signals completion, Angular automatically completes it after four seconds by default. The MAX_ANIMATION_TIMEOUT token can configure that delay. See the official API guide for callback details.
Keep component boundaries in mind
Angular can wait for descendant leave animations before removing a parent only when the parent and descendant are in the same component template. A leave animation inside a nested child component’s own template will not run before its parent removes that child view.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →To animate a nested child’s removal, place the leave binding on the child component’s host in the parent template, or make the parent’s removal wait for the child’s completion in application code. This boundary matters when an animation appears to work on a standalone element but not when that element is encapsulated in a child component.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.What changes when migrating from legacy Angular animations?
Angular deprecated @angular/animations as of v20.2 and introduced animate.enter and animate.leave. Angular recommends native CSS with the new APIs for new code. The legacy animations overview and migration guide describe the status and migration direction.
The new APIs are not a drop-in replacement for every legacy choreography feature. The legacy system included tools for querying elements and coordinating sequences, groups, and staggered effects. With the CSS-based approach, define ordering through CSS animation or transition delays and, where needed, completion events. The legacy :enter and :leave aliases belong to trigger-based animations; for the current APIs, use animate.enter and animate.leave. See Angular’s guides to legacy transitions and triggers and legacy complex sequences.
Coexistence limits
Legacy triggers and the new enter/leave APIs can coexist in separate components in the same application, but do not combine them within one component. Projected content moving between components that use different systems is also unsupported: Angular treats that situation as if both animation systems were used in the same component.
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 →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.
