Goodbye @angular/animations — hello animate.enter & animate.leave in Angular 20.2 🎯

Why this change?

• Simpler DX: No framework-specific DSL—just HTML + CSS (or a JS library).
• Smaller bundles: Removing @angular/animations can significantly reduce JS size.
• Smooth performance: Use GPU-friendly CSS transitions/animations.

What the new features do (in a nutshell)

• animate.enter="classA classB" → Applies CSS class(es) when an element enters the DOM.
• animate.leave="classC" → Applies class(es) when an element leaves; Angular removes the node after the longest transition/animation ends.
• (animate.leave)="onLeave($event)" → Run your own JS animation (Web Animations API, GSAP, etc.), then call $event.animationComplete() so Angular knows it can remove the element. (If you forget, Angular times out after ~4s; configurable via MAX_ANIMATION_TIMEOUT.)

Tiny examples

Enter (CSS keyframes):

(Concepts from the official guide.)

Leave (CSS transitions):

Angular removes the element after the transition finishes.

Leave (JS-driven):

(Calling animationComplete() is required when you take over the leave animation.)

Migration in 4 quick steps

1. Inventory your existing triggers/DSL (trigger, transition, state, :enter, :leave).
2. Re-implement with CSS classes + animate.enter / animate.leave in templates.
3. For any JS choreography, switch to (animate.leave) with animationComplete().
4. Remove @angular/animations once deps are updated.

Downloadable demo app (with code comments)

• What’s inside: three examples—CSS keyframes on enter, CSS transitions on leave, and a Web Animations API leave with animationComplete().
• Run it

👉 Download the project zip 👇

https://github.com/vinny59200/ng-animate-enter-leave.git

Official references

• Enter/Leave guide — how it works, event bindings, animationComplete(), and MAX_ANIMATION_TIMEOUT.
• Migration guide — deprecation of @angular/animations in v20.2 + why CSS/JS is recommended.
• CSS animations guide — patterns and tips for native CSS animations.