feat: add flip and height animation

sbb-design-systems · Aug 15, 2024 · 1a4f21b · 1a4f21b
1 parent 574372a
commit 1a4f21b
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 17 deletions.
diff --git a/src/elements/flip-card/flip-card-details/flip-card-details.scss b/src/elements/flip-card/flip-card-details/flip-card-details.scss
@@ -7,6 +7,7 @@
   --sbb-flip-card-details-opacity: 0;
   --sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);
   --sbb-flip-card-details-max-height: var(--sbb-flip-card-details-min-height);
+  --sbb-flip-card-details-transition-delay: var(--sbb-animation-duration-6x);
   --sbb-flip-card-details-padding: var(--sbb-spacing-responsive-s);
   --sbb-flip-card-details-padding-block-end: calc(
     var(--sbb-spacing-responsive-s) + var(--sbb-spacing-responsive-xs) + var(--sbb-size-element-m)
@@ -30,8 +31,11 @@
   padding-block-end: var(--sbb-flip-card-details-padding-block-end);
   max-height: var(--sbb-flip-card-details-max-height);
   transform: translateY(var(--sbb-flip-card-details-translate-y));
+  transition-property: max-height, transform, opacity;
+  transition-duration: var(--sbb-flip-card-details-transition-duration);
 
-  // transition: var(--sbb-flip-card-details-transition-duration) ease-out;
-  // transition-delay: var(--sbb-flip-card-details-transition-delay);
-  transition: all var(--sbb-flip-card-details-transition-duration) ease-out;
+  :host([data-flipped]) & {
+    transition-delay: 0s, var(--sbb-flip-card-details-transition-delay),
+      var(--sbb-flip-card-details-transition-delay);
+  }
 }
diff --git a/src/elements/flip-card/flip-card/flip-card.scss b/src/elements/flip-card/flip-card/flip-card.scss
@@ -3,7 +3,6 @@
 // Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component.
 @include sbb.box-sizing;
 
-// TODO: improve component's animation
 :host {
   --sbb-flip-card-background-color: var(--sbb-color-cloud);
   --sbb-flip-card-border-radius: var(--sbb-border-radius-4x);
@@ -14,11 +13,7 @@
     var(--sbb-animation-duration-5x)
   );
   --sbb-flip-card-summary-transition-delay: var(--sbb-animation-duration-2x);
-  --sbb-flip-card-details-transition-duration: var(
-    --sbb-disable-animation-zero-time,
-    var(--sbb-animation-duration-4x)
-  );
-  --sbb-flip-card-details-transition-delay: 0s;
+  --sbb-flip-card-details-transition-duration: var(--sbb-animation-duration-4x);
 
   position: relative;
   display: block;
@@ -35,12 +30,7 @@
 }
 
 :host([data-flipped]) {
-  --sbb-flip-card-background-color: var(--sbb-color-midnight);
-  --sbb-flip-card-details-transition-duration: var(
-    --sbb-disable-animation-zero-time,
-    var(--sbb-animation-duration-2x)
-  );
-  --sbb-flip-card-details-transition-delay: var(--sbb-animation-duration-5x);
+  --sbb-flip-card-details-transition-duration: var(--sbb-animation-duration-2x);
   --sbb-flip-card-summary-transition-delay: 0s;
   --sbb-flip-card-details-min-height: var(--sbb-flip-card-details-scroll-height);
 
@@ -95,6 +85,30 @@
       }
     }
   }
+
+  // Expanding dark background from the button when flipped.
+  &::before {
+    content: '';
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    inset-inline-start: var(--sbb-spacing-responsive-s);
+    inset-block-end: var(--sbb-spacing-responsive-s);
+    background-color: var(--sbb-color-midnight);
+    width: var(--sbb-size-element-xs);
+    height: var(--sbb-size-element-xs);
+    border-radius: var(--sbb-size-element-xs);
+    transition: var(--sbb-animation-duration-5x) ease-out;
+
+    :host([data-flipped]) & {
+      opacity: 1;
+      inset-inline-start: 0;
+      inset-block-end: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: var(--sbb-flip-card-border-radius);
+    }
+  }
 }
 
 .sbb-flip-card--toggle-button {

diff --git a/src/elements/flip-card/flip-card/flip-card.ts b/src/elements/flip-card/flip-card/flip-card.ts
@@ -7,6 +7,7 @@ import { SbbConnectedAbortController, SbbLanguageController } from '../../core/c
 import { EventEmitter } from '../../core/eventing.js';
 import { i18nFlipCard, i18nReverseCard } from '../../core/i18n.js';
 import { SbbHydrationMixin } from '../../core/mixins.js';
+import { AgnosticResizeObserver } from '../../core/observers.js';
 import type { SbbFlipCardDetailsElement } from '../flip-card-details.js';
 import type { SbbFlipCardSummaryElement } from '../flip-card-summary.js';
 
@@ -58,9 +59,11 @@ export class SbbFlipCardElement extends SbbHydrationMixin(LitElement) {
 
   private _abort = new SbbConnectedAbortController(this);
   private _language = new SbbLanguageController(this);
+  private _flipCardResizeObserver = new AgnosticResizeObserver(() => this._setFlipCardHeight());
 
   public override connectedCallback(): void {
     super.connectedCallback();
+    this._flipCardResizeObserver.observe(this);
     this.addEventListener(
       'click',
       (event: Event) => {
@@ -75,12 +78,16 @@ export class SbbFlipCardElement extends SbbHydrationMixin(LitElement) {
     );
   }
 
-  /** Toggles the state of the sbb-flip-card. */
-  public toggle(): void {
+  private _setFlipCardHeight(): void {
     this.style?.setProperty(
       '--sbb-flip-card-details-scroll-height',
       `${this.details!.shadowRoot?.firstElementChild?.scrollHeight}px`,
     );
+  }
+
+  /** Toggles the state of the sbb-flip-card. */
+  public toggle(): void {
+    this._setFlipCardHeight();
     this._flipped = !this._flipped;
     this.toggleAttribute('data-flipped', this._flipped);
     this.details!.toggleAttribute('data-flipped', this._flipped);