Remove animation package

[DerekLiang]

Summary

• Per Angular official doc https://angular.dev/api/animations/animation, @angular/animations is deprecated.
• Removes @angular/animations (and BrowserAnimationsModule) as a peer dependency entirely, eliminating the requirement to provide BrowserAnimationsModule in zoneless Angular applications
• Replaces all Angular animation triggers in collapse, dropdown, datepicker, and typeahead with native CSS height transitions driven by requestAnimationFrame + transitionend — the same pattern Angular's own migration guide recommends
• All transitionend handlers guard against bubbled child events (e.target + e.propertyName checks) and are properly cleaned up in ngOnDestroy
• Schematics updated to no longer inject BrowserAnimationsModule on ng add
• Fix animation issues （all animations are broken） that caused by zoneless migration

Motivation

@angular/animations is deprecated as of Angular v20.2 and is incompatible with zoneless change detection — components using AnimationBuilder trigger zone re-entry via internal setTimeout/requestAnimationFrame calls, breaking zoneless apps. This was reported in issues #6784 and #6808.

What changed (high level)

All Angular @angular/animations usage (AnimationBuilder, AnimationFactory, AnimationPlayer, trigger, state, transition, animate) has been removed. Every component now drives animation via the browser's native
CSS transition engine, set imperatively with Renderer2.

---

Component-by-component

1. Collapse (collapse.directive.ts)

CSS transition on height.

• AnimationBuilder/AnimationPlayer removed from the constructor.
• animationRun() now applies transition: height 400ms cubic-bezier(0.4,0.0,0.2,1) directly to the element via Renderer2.
• Three cases handled:
  • Mid-animation reversal — snapshots current rendered height with getBoundingClientRect(), forces a synchronous reflow (offsetHeight), then flips to the opposite target.
  • Expand (fresh) — sets height: 0, reflows, then one requestAnimationFrame defers setting height: scrollHeight so Chrome registers the 0px start state before the first paint.
  • Collapse (fresh) — two nested requestAnimationFrame calls: first pins at scrollHeight, second sets height: 0. Needed because a forced reflow inside a rAF callback is not a reliable transition "before-change"
    checkpoint across all browsers.
• transitionend signals completion; a 450ms setTimeout fallback clears stuck state if the event never fires.

2. Dropdown (bs-dropdown-container.component.ts)

CSS transition on height. No rAF.

• AnimationBuilder/AnimationFactory removed.
• height: 0; overflow: hidden are applied before the .show class is added, so Bootstrap's display: block never paints the element at its natural height (fixes the ~20px flash glitch).
• _animateExpand() then applies the transition, forces a synchronous reflow (offsetHeight) to lock height: 0 as the "before-change" state, then immediately sets height: scrollHeight — the CSS engine animates
  from there.
• No requestAnimationFrame — the synchronous reflow is sufficient here since the initial state is already painted.
• transitionend (with { once: true }) + 270ms fallback setTimeout handles cleanup.

3. Typeahead (typeahead-container.component.ts)

CSS transition on max-height. No rAF.

• typeaheadAnimation trigger removed from @Component.animations and [@typeaheadAnimation] removed from the template.
• Uses max-height (not height) to avoid conflict with the [style.height] host binding.
• Constructor sets max-height: 0; overflow: hidden immediately so the element is hidden before the position service fires.
• On the first position-service event, _animateExpand() applies the transition, forces a reflow (offsetHeight), then sets max-height: scrollHeight — CSS takes over.
• No requestAnimationFrame — same reasoning as dropdown.
• transitionend (with { once: true }) + 270ms fallback setTimeout handles cleanup.

4. Datepicker (bs-datepicker-container, bs-daterangepicker-container, inline variants)

Angular animations removed from the animations metadata array — these components did not have a custom expand/collapse animation to replace, so no CSS transition logic was added.

---

rAF usage status

Component	rAF present	Why
Collapse — expand path	1 rAF	Defers target height so browser paints 0px start state first
Collapse — collapse path	2 nested rAFs	Cross-browser reliability: reflow inside rAF isn't a guaranteed "before-change" checkpoint
Dropdown	None	Synchronous offsetHeight reflow is sufficient
Typeahead	None	Synchronous offsetHeight reflow is sufficient

rAF is not driving any animation — in all cases the CSS transition engine owns the interpolation. rAF is purely a scheduling tool to ensure the browser has committed a concrete "before" paint state before the
target value is written.

[DerekLiang]

@lexasq could you please provide feedback again. rAF is removed as much as possible. thx