fix(components/tabs)!: replace @angular/animations with CSS transitions (#4288)

Blackbaud-SteveBrush · web-flow · commit 90b183b1524d · 2026-03-17T12:53:26.000Z
BREAKING CHANGE

`SkySectionedFormComponent` and `SkyVerticalTabsetComponent` have
replaced `@angular/animations` with CSS transitions. Tests that interact
with sectioned forms or vertical tabs in responsive/mobile mode may need
to add `provideNoopSkyAnimations()` from `@skyux/core` to their
`TestBed` providers to disable SKY UX CSS transitions during tests.

```
import { provideNoopSkyAnimations } from '@skyux/core';

TestBed.configureTestingModule({
  providers: [provideNoopSkyAnimations()],
});
```
diff --git a/apps/integration/src/app/integrations/vertical-tabset-back-to-top/vertical-tabset-back-to-top.component.spec.ts b/apps/integration/src/app/integrations/vertical-tabset-back-to-top/vertical-tabset-back-to-top.component.spec.ts
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { SkyAppTestUtility } from '@skyux-sdk/testing';
+import { provideNoopSkyAnimations } from '@skyux/core';
 
 import { VerticalTabsetBackToTopComponent } from './vertical-tabset-back-to-top.component';
 import { VerticalTabsetBackToTopModule } from './vertical-tabset-back-to-top.module';
@@ -52,7 +52,8 @@ describe('Vertical tabset with a back to top', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [NoopAnimationsModule, VerticalTabsetBackToTopModule],
+      imports: [VerticalTabsetBackToTopModule],
+      providers: [provideNoopSkyAnimations()],
     });
 
     fixture = TestBed.createComponent(VerticalTabsetBackToTopComponent);
diff --git a/libs/components/code-examples/src/lib/modules/tabs/sectioned-form/modal/example.component.spec.ts b/libs/components/code-examples/src/lib/modules/tabs/sectioned-form/modal/example.component.spec.ts
@@ -1,6 +1,6 @@
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { provideNoopSkyAnimations } from '@skyux/core';
 import { SkyInputBoxHarness } from '@skyux/forms/testing';
 import { SkySectionedFormHarness } from '@skyux/tabs/testing';
 
@@ -12,7 +12,8 @@ describe('Sectioned form in a modal example', () => {
     fixture: ComponentFixture<TabsSectionedFormModalExampleComponent>;
   }> {
     await TestBed.configureTestingModule({
-      imports: [TabsSectionedFormModalExampleComponent, NoopAnimationsModule],
+      imports: [TabsSectionedFormModalExampleComponent],
+      providers: [provideNoopSkyAnimations()],
     }).compileComponents();
     const fixture = TestBed.createComponent(
       TabsSectionedFormModalExampleComponent,
diff --git a/libs/components/code-examples/src/lib/modules/tabs/vertical-tabs/basic/example.component.spec.ts b/libs/components/code-examples/src/lib/modules/tabs/vertical-tabs/basic/example.component.spec.ts
@@ -1,6 +1,6 @@
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { provideNoopSkyAnimations } from '@skyux/core';
 import { SkyVerticalTabsetHarness } from '@skyux/tabs/testing';
 
 import { TabsVerticalTabsBasicExampleComponent } from './example.component';
@@ -24,7 +24,8 @@ describe('Basic vertical tabs example', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [TabsVerticalTabsBasicExampleComponent, NoopAnimationsModule],
+      imports: [TabsVerticalTabsBasicExampleComponent],
+      providers: [provideNoopSkyAnimations()],
     });
   });
 
diff --git a/libs/components/code-examples/src/lib/modules/tabs/vertical-tabs/grouped/example.component.spec.ts b/libs/components/code-examples/src/lib/modules/tabs/vertical-tabs/grouped/example.component.spec.ts
@@ -1,6 +1,6 @@
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { provideNoopSkyAnimations } from '@skyux/core';
 import { SkyVerticalTabsetHarness } from '@skyux/tabs/testing';
 
 import { TabsVerticalTabsGroupedExampleComponent } from './example.component';
@@ -24,7 +24,8 @@ describe('Group vertical tabs example', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [TabsVerticalTabsGroupedExampleComponent, NoopAnimationsModule],
+      imports: [TabsVerticalTabsGroupedExampleComponent],
+      providers: [provideNoopSkyAnimations()],
     });
   });
 
diff --git a/libs/components/code-examples/src/lib/modules/tabs/vertical-tabs/mixed/example.component.spec.ts b/libs/components/code-examples/src/lib/modules/tabs/vertical-tabs/mixed/example.component.spec.ts
@@ -1,6 +1,6 @@
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { provideNoopSkyAnimations } from '@skyux/core';
 import { SkyVerticalTabsetHarness } from '@skyux/tabs/testing';
 
 import { TabsVerticalTabsMixedExampleComponent } from './example.component';
@@ -24,7 +24,8 @@ describe('Mixed vertical tabs example', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [TabsVerticalTabsMixedExampleComponent, NoopAnimationsModule],
+      imports: [TabsVerticalTabsMixedExampleComponent],
+      providers: [provideNoopSkyAnimations()],
     });
   });
 
diff --git a/libs/components/code-examples/src/lib/modules/tabs/wizard/basic/modal.component.spec.ts b/libs/components/code-examples/src/lib/modules/tabs/wizard/basic/modal.component.spec.ts
@@ -3,6 +3,7 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { provideRouter } from '@angular/router';
+import { provideNoopSkyAnimations } from '@skyux/core';
 import { SkyInputBoxHarness } from '@skyux/forms/testing';
 import { SkyModalInstance } from '@skyux/modals';
 import {
@@ -19,7 +20,11 @@ describe('Wizard tabset demo', () => {
     loader: HarnessLoader;
   }> {
     await TestBed.configureTestingModule({
-      providers: [provideRouter([]), SkyModalInstance],
+      providers: [
+        provideNoopSkyAnimations(),
+        provideRouter([]),
+        SkyModalInstance,
+      ],
       imports: [ModalComponent, NoopAnimationsModule],
     }).compileComponents();
 
diff --git a/libs/components/docs-tools/src/lib/modules/code-example-viewer/code-example-viewer.component.spec.ts b/libs/components/docs-tools/src/lib/modules/code-example-viewer/code-example-viewer.component.spec.ts
@@ -2,8 +2,8 @@ import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { expectAsync } from '@skyux-sdk/testing';
+import { provideNoopSkyAnimations } from '@skyux/core';
 import { SkyBoxHarness } from '@skyux/layout/testing';
 
 import { SkyDocsCodeExampleViewerComponent } from './code-example-viewer.component';
@@ -101,7 +101,8 @@ class FooExampleComponent {}`,
     };
 
     TestBed.configureTestingModule({
-      imports: [NoopAnimationsModule, SkyDocsCodeExampleViewerModule],
+      imports: [SkyDocsCodeExampleViewerModule],
+      providers: [provideNoopSkyAnimations()],
     });
   });
 
diff --git a/libs/components/tabs/package.json b/libs/components/tabs/package.json
@@ -16,7 +16,6 @@
   },
   "homepage": "https://github.com/blackbaud/skyux#readme",
   "peerDependencies": {
-    "@angular/animations": "^21.2.0",
     "@angular/cdk": "^21.2.0",
     "@angular/common": "^21.2.0",
     "@angular/core": "^21.2.0",
diff --git a/libs/components/tabs/src/lib/modules/sectioned-form/fixtures/sectioned-form-fixtures.module.ts b/libs/components/tabs/src/lib/modules/sectioned-form/fixtures/sectioned-form-fixtures.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { provideNoopSkyAnimations } from '@skyux/core';
 import { SkyCheckboxModule } from '@skyux/forms';
 
 import { SkySectionedFormModule } from '../sectioned-form.module';
@@ -19,18 +19,14 @@ import { SkySectionedFormFixtureComponent } from './sectioned-form.component.fix
     SkySectionedFormNoSectionsFixtureComponent,
     SkySectionedFormNoActiveFixtureComponent,
   ],
-  imports: [
-    NoopAnimationsModule,
-    SkySectionedFormModule,
-    SkyCheckboxModule,
-    FormsModule,
-  ],
+  imports: [SkySectionedFormModule, SkyCheckboxModule, FormsModule],
   exports: [
     SkySectionedFormFixtureComponent,
     SkySectionedFormFixtureInformation1Component,
     SkySectionedFormFixtureInformation2Component,
     SkySectionedFormNoSectionsFixtureComponent,
     SkySectionedFormNoActiveFixtureComponent,
   ],
+  providers: [provideNoopSkyAnimations()],
 })
 export class SkySectionedFormFixturesModule {}
diff --git a/libs/components/tabs/src/lib/modules/sectioned-form/sectioned-form.component.html b/libs/components/tabs/src/lib/modules/sectioned-form/sectioned-form.component.html
@@ -18,11 +18,11 @@
   @if (maintainSectionContent || tabService.tabsVisible()) {
     <div
       class="sky-sectioned-form-tabs"
+      [class.sky-animation-slide-enter-left]="animationEnabled()"
       [ngClass]="{
         'sky-sectioned-form-tabs-hidden': !tabService.tabsVisible(),
         'sky-sectioned-form-tabs-only': !tabService.contentVisible()
       }"
-      [@tabEnter]="tabService.animationTabsVisibleState"
     >
       <ng-content />
     </div>
@@ -31,10 +31,10 @@
     <div
       #skySectionSideContent
       class="sky-sectioned-form-content"
+      [class.sky-animation-slide-enter-right]="animationEnabled()"
       [ngClass]="{
         'sky-sectioned-form-content-hidden': !tabService.contentVisible()
       }"
-      [@contentEnter]="tabService.animationContentVisibleState"
     ></div>
   }
 </div>
diff --git a/libs/components/tabs/src/lib/modules/sectioned-form/sectioned-form.component.spec.ts b/libs/components/tabs/src/lib/modules/sectioned-form/sectioned-form.component.spec.ts
@@ -287,16 +287,15 @@ describe('Sectioned form component', () => {
     expect(indexChangedSpy.calls.count()).toEqual(1);
   });
 
-  it('should have a visible animation state on load in mobile', () => {
+  it('should show content on load in mobile', () => {
     mediaQueryController.setBreakpoint('xs');
     const fixture = createTestComponent();
+    const el = fixture.nativeElement;
 
     fixture.detectChanges();
 
-    expect(
-      fixture.componentInstance.sectionedForm?.tabService
-        .animationContentVisibleState,
-    ).toBe('shown');
+    const content = getVisibleContent(el);
+    expect(content.length).toBe(1);
   });
 
   it('should hide content and show tabs on mobile after calling showTabs function', () => {
diff --git a/libs/components/tabs/src/lib/modules/sectioned-form/sectioned-form.component.ts b/libs/components/tabs/src/lib/modules/sectioned-form/sectioned-form.component.ts
@@ -1,4 +1,3 @@
-import { animate, style, transition, trigger } from '@angular/animations';
 import {
   AfterViewChecked,
   ChangeDetectionStrategy,
@@ -11,6 +10,8 @@ import {
   OnInit,
   Output,
   ViewChild,
+  afterNextRender,
+  signal,
 } from '@angular/core';
 import { SkyLogService } from '@skyux/core';
 
@@ -19,11 +20,7 @@ import { distinctUntilChanged, takeUntil } from 'rxjs/operators';
 
 import { SkyTabIdService } from '../shared/tab-id.service';
 
-import {
-  HIDDEN_STATE,
-  SkyVerticalTabsetService,
-  VISIBLE_STATE,
-} from './../vertical-tabset/vertical-tabset.service';
+import { SkyVerticalTabsetService } from './../vertical-tabset/vertical-tabset.service';
 import { SkySectionedFormMessage } from './types/sectioned-form-message';
 import { SkySectionedFormMessageType } from './types/sectioned-form-message-type';
 
@@ -36,20 +33,6 @@ import { SkySectionedFormMessageType } from './types/sectioned-form-message-type
   styleUrls: ['./sectioned-form.component.scss'],
   providers: [SkyTabIdService, SkyVerticalTabsetService],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [
-    trigger('tabEnter', [
-      transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
-        style({ transform: 'translate(-100%)' }),
-        animate('150ms ease-in'),
-      ]),
-    ]),
-    trigger('contentEnter', [
-      transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
-        style({ transform: 'translate(100%)' }),
-        animate('150ms ease-in'),
-      ]),
-    ]),
-  ],
   standalone: false,
 })
 export class SkySectionedFormComponent
@@ -104,6 +87,8 @@ export class SkySectionedFormComponent
 
   #_messageStream = new Subject<SkySectionedFormMessage>();
 
+  protected animationEnabled = signal(false);
+
   constructor(
     public tabService: SkyVerticalTabsetService,
     changeRef: ChangeDetectorRef,
@@ -114,6 +99,11 @@ export class SkySectionedFormComponent
     this.#tabIdSvc = tabIdSvc;
     this.#logger = logger;
 
+    // Enable animations after the first render.
+    afterNextRender(() => {
+      this.animationEnabled.set(true);
+    });
+
     this.#initMessageStream();
 
     this.#tabIdSvc.ids.pipe(takeUntil(this.#ngUnsubscribe)).subscribe((ids) => {
@@ -158,7 +148,6 @@ export class SkySectionedFormComponent
 
     if (this.tabService.isMobile()) {
       this.ariaRole = undefined;
-      this.tabService.animationContentVisibleState = VISIBLE_STATE;
       this.#changeRef.markForCheck();
     }
   }
diff --git a/libs/components/tabs/src/lib/modules/vertical-tabset/fixtures/vertical-tabs-fixtures.module.ts b/libs/components/tabs/src/lib/modules/vertical-tabset/fixtures/vertical-tabs-fixtures.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { provideNoopSkyAnimations } from '@skyux/core';
 
 import { SkyVerticalTabsetModule } from '../vertical-tabset.module';
 
@@ -21,10 +21,10 @@ import { VerticalTabsetTestComponent } from './vertical-tabset.component.fixture
   ],
   imports: [
     FormsModule,
-    NoopAnimationsModule,
     SkyVerticalTabsetModule,
     VerticalTabsetProgrammaticTestComponent,
   ],
+  providers: [provideNoopSkyAnimations()],
   exports: [
     VerticalTabsetTestComponent,
     VerticalTabsetEmptyGroupTestComponent,
diff --git a/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.html b/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.html
@@ -24,30 +24,31 @@
     "
     [attr.role]="isMobile ? undefined : ariaRole"
   ></span>
-  @if (maintainTabContent || tabService.tabsVisible()) {
-    <div
-      #groupContainerWrapper
-      class="sky-vertical-tabset-group-container"
-      [@tabGroupEnter]="tabService.animationTabsVisibleState"
-      [ngClass]="{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }"
-      [tabIndex]="tablistHasFocus ? -1 : 0"
-      (@tabGroupEnter.done)="tabsetFocus()"
-      (keydown.arrowDown)="tabGroupsArrowDown(); $event.preventDefault()"
-      (keydown.arrowUp)="tabGroupsArrowUp(); $event.preventDefault()"
-      (focusin)="trapFocusInTablist()"
-      (focusout)="resetTabIndex()"
-    >
-      <ng-content />
-    </div>
-  }
+  <div
+    #groupContainerWrapper
+    class="sky-vertical-tabset-group-container"
+    skyTransitionEndHandler
+    transitionPropertyToTrack="transform"
+    [class.sky-animation-slide-enter-left]="tabService.isMobile()"
+    [ngClass]="{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }"
+    [tabIndex]="tablistHasFocus ? -1 : 0"
+    [transitionTrigger]="tabService.tabsVisible()"
+    (keydown.arrowDown)="tabGroupsArrowDown(); $event.preventDefault()"
+    (keydown.arrowUp)="tabGroupsArrowUp(); $event.preventDefault()"
+    (focusin)="trapFocusInTablist()"
+    (focusout)="resetTabIndex()"
+    (transitionEnd)="tabsetFocus()"
+  >
+    <ng-content />
+  </div>
   @if (maintainTabContent || tabService.contentVisible()) {
     <div
       #contentContainerWrapper
       class="sky-vertical-tabset-content"
+      [class.sky-animation-slide-enter-right]="tabService.isMobile()"
       [ngClass]="{
         'sky-vertical-tabset-content-hidden': !tabService.contentVisible()
       }"
-      [@contentEnter]="tabService.animationContentVisibleState"
       (focusin)="resetTabIndex()"
     >
       <div #skySideContent></div>
diff --git a/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.ts b/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.ts
diff --git a/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.module.ts b/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.module.ts
diff --git a/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.service.spec.ts b/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.service.spec.ts
diff --git a/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.service.ts b/libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.service.ts
diff --git a/libs/components/tabs/testing/src/modules/sectioned-form/sectioned-form-harness.spec.ts b/libs/components/tabs/testing/src/modules/sectioned-form/sectioned-form-harness.spec.ts
diff --git a/libs/components/tabs/testing/src/modules/vertical-tabset/vertical-tabset-harness.spec.ts b/libs/components/tabs/testing/src/modules/vertical-tabset/vertical-tabset-harness.spec.ts
