refactor(accordion): use native CSS animations

spliffone · spliffone · commit aa2106dbcab4 · 2026-01-15T21:18:48.000+01:00
diff --git a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode-no-backdrop.yaml b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode-no-backdrop.yaml
@@ -4,9 +4,7 @@
 - button "Hey there" [expanded]
 - region "Hey there": And here we have some content
 - button "Another one"
-- region "Another one"
 - button "Number three"
-- region "Number three"
 - banner:
   - link "Siemens logo":
     - /url: "#/"
diff --git a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode.yaml b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--over-mode.yaml
@@ -4,9 +4,7 @@
 - button "Hey there" [expanded]
 - region "Hey there": And here we have some content
 - button "Another one"
-- region "Another one"
 - button "Number three"
-- region "Number three"
 - banner:
   - link "Siemens logo":
     - /url: "#/"
diff --git a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--scroll-mode.yaml b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--scroll-mode.yaml
@@ -4,9 +4,7 @@
 - button "Hey there" [expanded]
 - region "Hey there": And here we have some content
 - button "Another one"
-- region "Another one"
 - button "Number three"
-- region "Number three"
 - banner:
   - link "Siemens logo":
     - /url: "#/"
diff --git a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--open.yaml b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--open.yaml
@@ -13,9 +13,7 @@
 - button "Properties 5" [expanded]
 - region "Properties 5": And here we have some content
 - button "Documents"
-- region "Documents"
 - button "Graphics"
-- region "Graphics"
 - banner:
   - link "Siemens logo":
     - /url: "#/"
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-accordion--si-accordion-base-1.yaml b/playwright/snapshots/static.spec.ts-snapshots/si-accordion--si-accordion-base-1.yaml
@@ -2,8 +2,5 @@
 - button "Hey there" [expanded]
 - region "Hey there": Here is some content
 - button "Another one 5"
-- region "Another one 5"
 - button "Number three"
-- region "Number three"
-- button "Heading via content projection"
-- region "Heading via content projection"
+- button "Heading via content projection"
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-accordion--si-accordion.yaml b/playwright/snapshots/static.spec.ts-snapshots/si-accordion--si-accordion.yaml
@@ -2,8 +2,5 @@
 - button "Hey there" [expanded]
 - region "Hey there": Here is some content
 - button "Another one 5"
-- region "Another one 5"
 - button "Number three"
-- region "Number three"
-- button "Heading via content projection"
-- region "Heading via content projection"
+- button "Heading via content projection"
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-accordion--si-collapsible-panel-icons.yaml b/playwright/snapshots/static.spec.ts-snapshots/si-accordion--si-collapsible-panel-icons.yaml
@@ -1,12 +1,6 @@
 - button "Building automation"
-- region "Building automation"
 - button "Building infrastructure"
-- region "Building infrastructure"
 - button "Fire"
-- region "Fire"
 - button "Security"
-- region "Security"
 - button "Energy management"
-- region "Energy management"
-- button "Management system" [disabled]
-- region "Management system"
+- button "Management system" [disabled]
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-accordion--si-collapsible-panel.yaml b/playwright/snapshots/static.spec.ts-snapshots/si-accordion--si-collapsible-panel.yaml
@@ -1,10 +1,5 @@
 - button "Hey there"
-- region "Hey there"
 - button "Another one"
-- region "Another one"
 - button "Number three"
-- region "Number three"
 - button "This is disabled" [disabled]
-- region "This is disabled"
-- button "Heading via content projection"
-- region "Heading via content projection"
+- button "Heading via content projection"
diff --git a/projects/element-ng/accordion/si-collapsible-panel.component.html b/projects/element-ng/accordion/si-collapsible-panel.component.html
@@ -8,7 +8,7 @@
   [title]="hcollapsed() ? (heading() | translate) : ''"
   [attr.aria-expanded]="opened() && !hcollapsed()"
   [attr.aria-disabled]="disabled()"
-  [attr.aria-controls]="controlId"
+  [attr.aria-controls]="opened() ? controlId : null"
   [attr.aria-label]="hcollapsed() ? (heading() | translate) : ''"
   (keydown)="keydown($event)"
   (click)="doToggle($event)"
@@ -36,20 +36,20 @@
     <si-icon class="icon dropdown-caret" [icon]="icons.elementDown2" />
   </span>
 </div>
-<div
-  #content
-  role="region"
-  [id]="controlId"
-  [class]="`collapsible-content ${contentBgClasses()}`"
-  [@showHide]="showHide"
-  [attr.aria-labelledby]="headerId"
-  [class.full-height]="fullHeight()"
->
-  @if (opened()) {
+@if (opened()) {
+  <div
+    #content
+    role="region"
+    animate.leave="content-leave"
+    [id]="controlId"
+    [class]="`collapsible-content ${contentBgClasses()}`"
+    [attr.aria-labelledby]="headerId"
+    [class.full-height]="fullHeight()"
+  >
     <div>
       <div [class]="contentCssClasses()">
         <ng-content />
       </div>
     </div>
-  }
-</div>
+  </div>
+}
diff --git a/projects/element-ng/accordion/si-collapsible-panel.component.scss b/projects/element-ng/accordion/si-collapsible-panel.component.scss
@@ -86,14 +86,28 @@
 
 .collapsible-content {
   overflow: hidden;
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows variables.element-transition-duration(0.5s) ease-in;
   background: variables.$element-base-1;
   border-end-start-radius: var(--__radius);
   border-end-end-radius: var(--__radius);
 
+  @starting-style {
+    grid-template-rows: 0fr;
+  }
+
   &.full-height {
     // cannot use class overflow-auto, as it is using !important which is breaking the animation
     overflow: auto;
   }
+
+  &.content-leave {
+    grid-template-rows: 0fr;
+  }
+
+  > * {
+    // The min-block-size is required to support the transition on grid-template-rows
+    min-block-size: 0;
+  }
 }
diff --git a/projects/element-ng/accordion/si-collapsible-panel.component.ts b/projects/element-ng/accordion/si-collapsible-panel.component.ts
@@ -2,7 +2,6 @@
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
-import { animate, query, style, transition, trigger } from '@angular/animations';
 import {
   booleanAttribute,
   ChangeDetectionStrategy,
@@ -13,10 +12,11 @@ import {
   input,
   model,
   output,
+  signal,
   viewChild
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { areAnimationsDisabled, BackgroundColorVariant } from '@siemens/element-ng/common';
+import { BackgroundColorVariant } from '@siemens/element-ng/common';
 import { addIcons, elementDown2, SiIconComponent } from '@siemens/element-ng/icon';
 import { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';
 import { filter } from 'rxjs';
@@ -36,28 +36,9 @@ let controlIdCounter = 1;
     '[class]': 'colorVariant()',
     '[class.opened]': 'opened()',
     '[class.hcollapsed]': 'hcollapsed()',
-    '[class.full-height]': 'fullHeight()'
-  },
-  animations: [
-    trigger('showHide', [
-      transition('*=>hide', [
-        style({ overflow: 'hidden' }),
-        query(
-          ':leave',
-          [style({ blockSize: '*' }), animate('0.5s ease', style({ blockSize: '0' }))],
-          { optional: true }
-        )
-      ]),
-      transition('*=>show', [
-        style({ overflow: 'hidden' }),
-        query(
-          ':enter',
-          [style({ blockSize: '0' }), animate('0.5s ease', style({ blockSize: '*' }))],
-          { optional: true }
-        )
-      ])
-    ])
-  ]
+    '[class.full-height]': 'fullHeight()',
+    '[style.--element-animations-enabled]': 'disableAnimation() ? "0" : undefined'
+  }
 })
 export class SiCollapsiblePanelComponent {
   /**
@@ -128,15 +109,15 @@ export class SiCollapsiblePanelComponent {
   protected headerId = this.controlId + '-header';
   protected isHCollapsible = false;
   protected readonly icons = addIcons({ elementDown2 });
+  protected readonly disableAnimation = signal(false);
 
   private readonly accordionService = inject(SiAccordionService, { optional: true });
   private readonly accordionHCollapseService = inject(SiAccordionHCollapseService, {
     optional: true
   });
-  private enableAnimation = true;
-  private readonly animationsGloballyDisabled = areAnimationsDisabled();
+  /** Restore the content scroll position between open/close of the panel. */
   private lastScrollPos = 0;
-  private readonly contentRef = viewChild.required<ElementRef<HTMLElement>>('content');
+  private readonly contentRef = viewChild<ElementRef<HTMLElement>>('content');
 
   constructor() {
     this.isHCollapsible = !!this.accordionHCollapseService;
@@ -148,28 +129,28 @@ export class SiCollapsiblePanelComponent {
       .subscribe(() => this.openClose(false));
   }
 
-  protected get showHide(): string {
-    if (this.enableAnimation && !this.animationsGloballyDisabled) {
-      return this.opened() ? 'show' : 'hide';
-    }
-    return 'disabled';
-  }
-
   /**
    * Expand/collapse panel.
    * @param open - indicate the panel shall open or close
    * @param enableAnimation - with animation
    */
   openClose(open: boolean, enableAnimation = true): void {
+    if (!open) {
+      // Save scroll position before closing
+      this.lastScrollPos = this.contentRef()?.nativeElement.scrollTop ?? 0;
+    }
+
     this.opened.set(open);
-    this.enableAnimation = enableAnimation;
+    this.disableAnimation.set(!enableAnimation);
 
     if (open) {
+      // Restore scroll position after opening
       setTimeout(() => {
-        this.contentRef().nativeElement.scrollTop = this.lastScrollPos;
+        const contentRef = this.contentRef();
+        if (contentRef) {
+          contentRef.nativeElement.scrollTop = this.lastScrollPos;
+        }
       });
-    } else {
-      this.lastScrollPos = this.contentRef().nativeElement.scrollTop;
     }
   }
 
