Rewrite animations on the Web Animations API - #17576
Open
rkaraivanov wants to merge 2 commits into
Open
Conversation
@angular/animations is deprecated. The animation service, the players
and every preset in igniteui-angular/animations now run on the native
Web Animations API. The package is no longer a peer dependency and
provideAnimations() is not required.
Presets are callable: slideInTop({ duration: 1000 }). A bare preset
keeps its defaults. Durations and delays are milliseconds. Custom
animations use animation(keyframes, options). AnimationReferenceMetadata
takes the igniteui-webcomponents shape, re-implemented locally since
that package is an optional peer.
Players expose state and started signals and a finished$ observable.
finished$ is always delivered in a microtask, also after finish(). The
overlay's closed handler re-enters detach(), so a synchronous emission
blew up on released settings. This is the same buffering the Angular
renderer did.
Motion is controlled by provideIgxAnimations('auto' | 'always' | 'none').
'auto' honors prefers-reduced-motion, which is a behavioral change.
provideIgxNoopAnimations() replaces NoopAnimationsModule in tests.
Mirror and orientation lookups are keyed by preset identity, so
parameterized presets flip correctly in the auto position strategy.
The openAnimationDetaching/closeAnimationDetaching guards in the
overlay are gone; the player contract covers that case.
An ng update migration rewrites useAnimation(x, { params }) to
x({ ... }), converts '350ms'/'.35s' to numbers and retypes
AnimationReferenceMetadata to AnimationInput.
The old noop player reported a cancelled animation as finished after
reset(). That masked a bug in the grid filtering row: Tab on the
condition icon toggled a dropdown the navigation directive had already
started closing, reopening it. It now calls close(). Two combo tests
asserted on the same quirk and were corrected.
rkaraivanov
added
❌ status: awaiting-test
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
The overlay demo can throw at runtime by calling resolveAnimation() on null animations after hasAnimation disables them, and the lockfile update needs explicit confirmation per repo guidance.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR migrates Ignite UI for Angular’s animation stack away from the deprecated @angular/animations package, implementing all presets and the animation service on top of the native Web Animations API (WAAPI) while updating consumers (components, overlays, demos, tests, docs, and migrations) to the new API shape.
Changes:
- Replaced the Angular-animation-based
IgxAngularAnimationService/player with a WAAPI-basedIgxWebAnimationServiceand updated theAnimationPlayercontract (signals +finished$). - Updated presets and all usages from
useAnimation(..., { params })to callable presets and WAAPI-friendlyanimation(keyframes, options)metadata; added a migration entry for automated rewrites. - Removed
@angular/animationsfrom dependencies/peerDependencies and replaced test usage ofNoopAnimationsModulewithprovideIgxNoopAnimations().
File summaries
| File | Description |
|---|---|
| src/app/tree/tree.sample.ts | Updates demo usage to callable presets with numeric ms durations. |
| src/app/overlay/overlay.sample.ts | Updates overlay demo to retime animations via resolveAnimation() (contains a null-handling bug noted in comments). |
| src/app/overlay/overlay-animation.sample.ts | Rewrites custom overlay animations to WAAPI keyframes + options. |
| src/app/banner/banner.sample.ts | Updates banner demo animation settings to callable presets. |
| src/app/app.config.ts | Removes provideAnimations() since Ignite UI animations no longer depend on Angular animations. |
| projects/igniteui-angular/tree/src/tree/tree.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations() and updates animation service DI token/mock shape. |
| projects/igniteui-angular/tree/src/tree/tree-selection.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations() (incl. zoneless suite). |
| projects/igniteui-angular/tree/src/tree/tree-navigation.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/toast/src/toast/toast.component.ts | Removes useAnimation usage; updates docs/defaults to presets directly. |
| projects/igniteui-angular/toast/src/toast/toast.component.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations() across suites. |
| projects/igniteui-angular/tabs/src/tabs/tabs/tabs.component.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/switch/src/switch/switch.component.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/stepper/src/stepper/stepper.component.ts | Switches to AnimationInput + resolveAnimation() for duration overrides. |
| projects/igniteui-angular/stepper/src/stepper/stepper.component.spec.ts | Updates animation service mocking + replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts | Removes useAnimation; converts durations to ms numbers and uses callable presets. |
| projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.spec.ts | Replaces Angular-animation assertions with resolveAnimation() and uses provideIgxNoopAnimations(). |
| projects/igniteui-angular/slider/src/slider/slider.component.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/select/src/select/select.component.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations() in multiple setups. |
| projects/igniteui-angular/schematics/utils/dependency-handler.ts | Removes @angular/animations from schematic dependency map. |
| projects/igniteui-angular/radio/src/radio/radio.component.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/radio/src/radio/radio-group/radio-group.directive.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/paginator/src/paginator/paginator.component.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/package.json | Removes @angular/animations from peerDependencies. |
| projects/igniteui-angular/migrations/update-11_1_0/index.spec.ts | Adjusts migration spec fixtures (removes redundant empty imports arrays). |
| projects/igniteui-angular/migrations/migration-collection.json | Registers a new migration for the animations API rewrite. |
| projects/igniteui-angular/input-group/src/input-group/directives-input/read-only-input.directive.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/icon/src/icon/icon.service.spec.ts | Removes redundant empty imports: [] in test module config. |
| projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/tree-grid/src/tree-grid-summaries.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/tree-grid/src/tree-grid-sorting.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/tree-grid/src/tree-grid-selection.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/tree-grid/src/tree-grid-search.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/tree-grid/src/tree-grid-multi-cell-selection.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/tree-grid/src/tree-grid-keyBoardNav.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations() (incl. zoneless setup). |
| projects/igniteui-angular/grids/tree-grid/src/tree-grid-integration.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/tree-grid/src/tree-grid-indentation.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/tree-grid/src/tree-grid-grouping.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/tree-grid/src/tree-grid-grouping.pipe.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/tree-grid/src/tree-grid-filtering.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/tree-grid/src/tree-grid-expanding.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/tree-grid/src/tree-grid-crud.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/tree-grid/src/tree-grid-add-row-ui.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/pivot-grid/src/pivot-grid-keyboard-nav.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts | Updates pivot data selector to callable presets for 0ms animations. |
| projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.virtualization.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.selection.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.navigation.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.integration.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-add-row.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/grid/src/row-drag.directive.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations() in multiple setups. |
| projects/igniteui-angular/grids/grid/src/grid.sorting.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/grid/src/grid.search.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/grid/src/grid.pinning.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/grid/src/grid.pagination.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/grid/src/grid.nested.props.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations() in multiple setups. |
| projects/igniteui-angular/grids/grid/src/grid.multi-row-layout.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/grid/src/grid.multi-row-layout.integration.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/grid/src/grid.master-detail.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations() (incl. zoneless suite). |
| projects/igniteui-angular/grids/grid/src/grid.groupby.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations() (incl. zoneless suite). |
| projects/igniteui-angular/grids/grid/src/grid.crud.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/grid/src/grid-validation.spec.ts | Updates animation assertions to resolveAnimation() and uses provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/grid/src/grid-toolbar.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/grid/src/grid-summary.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/grid/src/grid-row-selection.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/grid/src/grid-row-pinning.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/grid/src/grid-row-editing.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/grid/src/grid-mrl-keyboard-nav.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/grid/src/grid-keyBoardNav.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations() in multiple setups. |
| projects/igniteui-angular/grids/grid/src/grid-keyBoardNav-headers.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations() in multiple setups. |
| projects/igniteui-angular/grids/grid/src/grid-filtering.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations() and updates providers composition. |
| projects/igniteui-angular/grids/grid/src/grid-filtering-advanced.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/grid/src/grid-collapsible-columns.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/grid/src/grid-clipboard.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/grid/src/grid-cell-selection.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/grid/src/grid-cell-editing.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/grid/src/grid-base.directive.ts | Updates API usage from hasStarted() to the new started() signal. |
| projects/igniteui-angular/grids/grid/src/grid-add-row.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/grid/src/column.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations() (incl. zoneless suite). |
| projects/igniteui-angular/grids/grid/src/column-selection.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/grid/src/column-resizing.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/grid/src/column-pinning.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/grid/src/column-moving.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/grid/src/column-hiding.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/grid/src/column-group.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/grid/src/cell.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations() in multiple setups. |
| projects/igniteui-angular/grids/grid/src/cell-merge.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/core/src/state.treegrid.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/core/src/state.pivotgrid.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/core/src/state.hierarchicalgrid.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/core/src/state.directive.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/core/src/services/excel/excel-exporter-grid.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/core/src/services/csv/csv-exporter-grid.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/core/src/grid-actions/grid-pinning-actions.component.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/core/src/grid-actions/grid-editing-actions.component.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/grids/core/src/filtering/grid-filtering.service.ts | Removes useAnimation and updates overlay open animation to preset call. |
| projects/igniteui-angular/grids/core/src/filtering/base/grid-filtering-row.component.ts | Fixes a Tab-key edge case by explicitly closing instead of toggling. |
| projects/igniteui-angular/grids/core/src/cell.component.ts | Replaces useAnimation calls with callable presets using numeric durations. |
| projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.ts | Switches to IGX_ANIMATION_SERVICE, AnimationInput, finished$, and started() signal. |
| projects/igniteui-angular/expansion-panel/src/expansion-panel/toggle-animation-component.spec.ts | Updates DI token to IGX_ANIMATION_SERVICE and removes NoopAnimationsModule. |
| projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.common.ts | Retypes animation settings from Angular metadata to AnimationInput. |
| projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/directives/src/directives/tooltip/tooltip.directive.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations() (incl. zoneless suite). |
| projects/igniteui-angular/directives/src/directives/tooltip/tooltip.common.ts | Replaces useAnimation with callable presets using numeric durations. |
| projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts | Updates API usage from hasStarted() to the new started() signal. |
| projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/directives/src/directives/focus/focus.directive.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/directives/src/directives/focus-trap/focus-trap.directive.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/directives/src/directives/date-time-editor/date-time-editor.directive.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations() in multiple setups. |
| projects/igniteui-angular/directives/src/directives/button/icon-button.directive.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/directives/src/directives/button/button.directive.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/dialog/src/dialog/dialog.component.ts | Updates docs to show callable presets instead of useAnimation(...). |
| projects/igniteui-angular/dialog/README.md | Updates documentation examples to callable presets with numeric durations. |
| projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.spec.ts | Replaces NoopAnimationsModule and old animation service usage with provideIgxNoopAnimations(). |
| projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations() (incl. zoneless setup). |
| projects/igniteui-angular/date-picker/src/date-picker/calendar-container/calendar-container.component.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/core/src/services/public_api.ts | Removes Angular animation exports and exposes the WAAPI service. |
| projects/igniteui-angular/core/src/services/overlay/utilities.ts | Retypes overlay animations to AnimationInput and removes detaching guards. |
| projects/igniteui-angular/core/src/services/overlay/position/auto-position-strategy.ts | Updates animation reversal to work with new preset identity-based utilities. |
| projects/igniteui-angular/core/src/services/overlay/overlay.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations() and removes Angular service dependency. |
| projects/igniteui-angular/core/src/services/animation/web-animation-service.ts | Adds WAAPI-based animation service honoring motion preferences. |
| projects/igniteui-angular/core/src/services/animation/animation.ts | Updates animation contracts, introduces DI tokens and provideIgxAnimations/provideIgxNoopAnimations. |
| projects/igniteui-angular/core/src/services/animation/angular-animation-service.ts | Removes Angular-based animation service (deleted). |
| projects/igniteui-angular/core/src/services/animation/angular-animation-player.ts | Removes Angular-based animation player (deleted). |
| projects/igniteui-angular/checkbox/src/checkbox/checkbox.component.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/carousel/src/carousel/carousel.component.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations() (incl. zoneless setup). |
| projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations() (incl. zoneless setup). |
| projects/igniteui-angular/calendar/src/calendar/calendar.component.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/calendar/src/calendar/calendar-multi-view.component.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/button-group/src/button-group/button-group.component.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/bottom-nav/src/bottom-nav/bottom-nav.component.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/banner/src/banner/banner.component.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/animations/src/types.ts | Adds new WAAPI-first animation types/presets + resolveAnimation(). |
| projects/igniteui-angular/animations/src/swing/README.md | Updates docs to new params types and callable preset usage. |
| projects/igniteui-angular/animations/src/slide/README.md | Updates docs to slide presets + callable usage and ms timings. |
| projects/igniteui-angular/animations/src/scale/README.md | Updates docs to callable usage and new params types. |
| projects/igniteui-angular/animations/src/rotate/README.md | Updates docs to callable usage and ms timings. |
| projects/igniteui-angular/animations/src/public_api.ts | Re-exports new types and utilities; updates family param exports. |
| projects/igniteui-angular/animations/src/misc/README.md | Fixes typo (“heartbeat”) and updates params/docs for ms timings + callable presets. |
| projects/igniteui-angular/animations/src/misc/index.ts | Exports new params types for misc presets. |
| projects/igniteui-angular/animations/src/interface.ts | Removes legacy IAnimationParams interface (deleted). |
| projects/igniteui-angular/animations/src/grow/README.md | Adds grow preset documentation for WAAPI-based grow animations. |
| projects/igniteui-angular/animations/src/grow/index.ts | Reimplements grow presets via WAAPI keyframes/preset definition. |
| projects/igniteui-angular/animations/src/flip/README.md | Updates docs to new params types and callable preset usage. |
| projects/igniteui-angular/animations/src/fade/README.md | Updates docs for callable presets and ms-based params. |
| projects/igniteui-angular/animations/src/fade/index.ts | Reimplements fade presets via WAAPI keyframes/preset definition. |
| projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.spec.ts | Replaces NoopAnimationsModule with provideIgxNoopAnimations(). |
| projects/igniteui-angular/accordion/src/accordion/accordion.component.spec.ts | Replaces Angular animation usage with callable presets and updates assertions via resolveAnimation(). |
| projects/igniteui-angular-performance/src/app/app.config.ts | Removes provideAnimations() from performance app config. |
| projects/igniteui-angular-elements/src/utils/injector-ref.ts | Removes provideAnimations() from elements injector setup. |
| projects/bundle-test/src/app/app.config.ts | Removes provideAnimations() from bundle-test config. |
| package.json | Removes @angular/animations from workspace dependencies. |
| package-lock.json | Removes @angular/animations entries from lockfile (requires confirmation per repo guidance). |
| CHANGELOG.md | Documents new WAAPI animation system, breaking changes, migration, and behavioral change. |
Review details
- Files reviewed: 181/182 changed files
- Comments generated: 1
- Review effort level: Lite
💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+294
to
298
| positionSettings.openAnimation = resolveAnimation(positionSettings.openAnimation, { duration: this.animationLength }); | ||
| positionSettings.closeAnimation = resolveAnimation(positionSettings.closeAnimation, { duration: this.animationLength }); | ||
| if (!this.hasAnimation) { | ||
| this._overlaySettings.positionStrategy.settings.openAnimation = null; | ||
| this._overlaySettings.positionStrategy.settings.closeAnimation = null; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
@angular/animations is deprecated. The animation service, the players and every preset in igniteui-angular/animations now run on the native Web Animations API. The package is no longer a peer dependency and provideAnimations() is not required.
Presets are callable: slideInTop({ duration: 1000 }). A bare preset keeps its defaults. Durations and delays are milliseconds. Custom animations use animation(keyframes, options). AnimationReferenceMetadata takes the igniteui-webcomponents shape, re-implemented locally since that package is an optional peer.
Players expose state and started signals and a finished$ observable. finished$ is always delivered in a microtask, also after finish(). The overlay's closed handler re-enters detach(), so a synchronous emission blew up on released settings. This is the same buffering the Angular renderer did.
Motion is controlled by provideIgxAnimations('auto' | 'always' | 'none'). 'auto' honors prefers-reduced-motion, which is a behavioral change. provideIgxNoopAnimations() replaces NoopAnimationsModule in tests.
Mirror and orientation lookups are keyed by preset identity, so parameterized presets flip correctly in the auto position strategy. The openAnimationDetaching/closeAnimationDetaching guards in the overlay are gone; the player contract covers that case.
An ng update migration rewrites useAnimation(x, { params }) to x({ ... }), converts '350ms'/'.35s' to numbers and retypes AnimationReferenceMetadata to AnimationInput.
The old noop player reported a cancelled animation as finished after reset(). That masked a bug in the grid filtering row: Tab on the condition icon toggled a dropdown the navigation directive had already started closing, reopening it. It now calls close(). Two combo tests asserted on the same quirk and were corrected.
Type of Change (check all that apply):
How Has This Been Tested?
Checklist:
feature/README.MDupdates for the feature docsREADME.MDCHANGELOG.MDupdates for newly added functionalityng updatemigrations for the breaking changes (migrations guidelines)