feat: improve header animation

sbb-design-systems · Nov 27, 2023 · 804100f · 804100f
1 parent 50e0d0b
commit 804100f
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 25 deletions.
diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss
@@ -25,9 +25,8 @@
   --sbb-dialog-backdrop-pointer-events: none;
   --sbb-dialog-backdrop-color: transparent;
   --sbb-dialog-header-padding-block: var(--sbb-spacing-responsive-s) 0;
-  --sbb-dialog-header-transition-duration: var(--sbb-animation-duration-6x);
   --sbb-dialog-header-margin-block-start: 0;
-  --sbb-dialog-content-transition: transform var(--sbb-dialog-header-transition-duration)
+  --sbb-dialog-content-transition: transform var(--sbb-dialog-animation-duration)
     var(--sbb-dialog-animation-easing);
   --sbb-dialog-footer-border: var(--sbb-border-width-1x) solid var(--sbb-color-cloud-default);
 
@@ -65,18 +64,9 @@
 
 :host([data-hide-header]) {
   // Hide transition
-  --sbb-dialog-content-transition: transform var(--sbb-dialog-header-transition-duration)
-    var(--sbb-dialog-animation-easing);
   --sbb-dialog-header-margin-block-start: calc(var(--sbb-dialog-header-height) * -1);
 }
 
-:host(:not([data-hide-header])) {
-  // Show transition
-  --sbb-dialog-content-transition: transform var(--sbb-dialog-header-transition-duration)
-      var(--sbb-dialog-animation-easing),
-    margin 0s var(--sbb-dialog-header-transition-duration);
-}
-
 :host([data-fullscreen]) {
   --sbb-dialog-backdrop-color: transparent;
   --sbb-dialog-max-width: 100%;
@@ -221,7 +211,7 @@
     transform: translateY(var(--sbb-dialog-header-margin-block-start));
     transition: {
       property: box-shadow, transform;
-      duration: var(--sbb-dialog-header-transition-duration);
+      duration: var(--sbb-dialog-animation-duration);
       timing-function: var(--sbb-dialog-animation-easing);
     }
   }
@@ -264,7 +254,7 @@
   padding-block: var(--sbb-dialog-padding-block);
   overflow: auto;
   transform: translateY(var(--sbb-dialog-header-margin-block-start));
-  margin-block: 0 var(--sbb-dialog-header-margin-block-start);
+  margin-block: 0 calc(var(--sbb-dialog-header-height) * -1);
   transition: var(--sbb-dialog-content-transition);
   z-index: -1;
 
@@ -274,11 +264,13 @@
     height: 100vh;
   }
 
+  // In order to improve the header transition on mobile (especially iOS) we use
+  // a combination of the transform and margin properties on the smaller breakpoints,
+  // while on desktop we use just the margin-block for a better transition of the visible scrollbar.
   @include sbb.mq($from: medium) {
     transform: unset;
     margin-block: var(--sbb-dialog-header-margin-block-start) 0;
-    transition: margin var(--sbb-dialog-header-transition-duration)
-      var(--sbb-dialog-animation-easing);
+    transition: margin var(--sbb-dialog-animation-duration) var(--sbb-dialog-animation-easing);
   }
 }
 

diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
@@ -126,9 +126,7 @@ export class SbbDialog extends LitElement {
     return this.dataset?.state as SbbOverlayState;
   }
 
-  private _dialogContentResizeObserver = new AgnosticResizeObserver(() =>
-    this._setOverflowAttribute(),
-  );
+  private _dialogContentResizeObserver = new AgnosticResizeObserver(() => this._onContentResize());
 
   private _ariaLiveRef: HTMLElement;
   private _ariaLiveRefToggle = false;
@@ -150,6 +148,7 @@ export class SbbDialog extends LitElement {
 
   private _dialog: HTMLDivElement;
   private _dialogHeaderElement: HTMLElement;
+  private _dialogHeaderHeight: number;
   private _dialogContentElement: HTMLElement;
   private _dialogCloseElement: HTMLElement;
   private _dialogController: AbortController;
@@ -195,7 +194,7 @@ export class SbbDialog extends LitElement {
     this._state = 'opening';
     // Add this dialog to the global collection
     dialogRefs.push(this as SbbDialog);
-    this._setOverflowAttribute();
+    this._onContentResize();
     // Disable scrolling for content below the dialog
     this._scrollHandler.disableScroll();
   }
@@ -229,13 +228,12 @@ export class SbbDialog extends LitElement {
 
   private _onContentScroll(): void {
     const hasVisibleHeader = this.dataset.hideHeader === undefined;
-    const dialogHeaderHeight = this._dialogHeaderElement.clientHeight;
 
     // Check whether hiding the header would make the scrollbar disappear
     // and prevent the hiding animation if so.
     if (
       hasVisibleHeader &&
-      this._dialogContentElement.clientHeight + dialogHeaderHeight >=
+      this._dialogContentElement.clientHeight + this._dialogHeaderHeight >=
         this._dialogContentElement.scrollHeight
     ) {
       return;
@@ -251,9 +249,6 @@ export class SbbDialog extends LitElement {
     // Check whether is scrolling down or up.
     if (currentScroll > 0 && this._lastScroll < currentScroll) {
       // Scrolling down
-      if (hasVisibleHeader) {
-        this.style.setProperty('--sbb-dialog-header-height', `${dialogHeaderHeight}px`);
-      }
       toggleDatasetEntry(this, 'hideHeader', true);
     } else {
       // Scrolling up
@@ -453,9 +448,20 @@ export class SbbDialog extends LitElement {
     firstFocusable.focus();
   }
 
-  private _setOverflowAttribute(): void {
+  private _setDialogHeaderHeight(): void {
+    this._dialogHeaderHeight = this._dialogHeaderElement.clientHeight;
+    this.style.setProperty(
+      '--sbb-dialog-header-height',
+      `${this._dialogHeaderElement.clientHeight}px`,
+    );
+  }
+
+  private _onContentResize(): void {
+    this._setDialogHeaderHeight();
+    // Check whether the content overflows and set the `overflows` attribute.
     this._overflows =
       this._dialogContentElement.scrollHeight > this._dialogContentElement.clientHeight;
+    // If the content doesn't overflow anymore after resizing and the header is currently hidden, shows the header again.
     if (!this._overflows && this.dataset.hideHeader === '') {
       toggleDatasetEntry(this, 'hideHeader', false);
     }