feat: fix animation

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

Hide file tree

Showing 3 changed files with 25 additions and 8 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
@@ -6,20 +6,32 @@
 :host {
   --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-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)
+  );
 
   display: contents;
 }
 
+:host([data-flipped]) {
+  --sbb-flip-card-details-max-height: calc(
+    var(--sbb-flip-card-details-min-height) + var(--sbb-flip-card-details-padding) +
+      var(--sbb-flip-card-details-padding-block-end)
+  );
+}
+
 .sbb-flip-card-details {
   pointer-events: none;
   color: var(--sbb-color-milk);
   opacity: var(--sbb-flip-card-details-opacity);
-  padding: var(--sbb-spacing-responsive-s);
-  padding-block-end: calc(
-    var(--sbb-spacing-responsive-s) + var(--sbb-spacing-responsive-xs) + var(--sbb-size-element-m)
-  );
+  padding: var(--sbb-flip-card-details-padding);
+  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: var(--sbb-flip-card-details-transition-duration) ease-out;
-  transition-delay: var(--sbb-flip-card-details-transition-delay);
-  max-height: var(--sbb-flip-card-details-min-height);
+
+  // 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;
 }
diff --git a/src/elements/flip-card/flip-card/flip-card.scss b/src/elements/flip-card/flip-card/flip-card.scss
@@ -42,7 +42,7 @@
   );
   --sbb-flip-card-details-transition-delay: var(--sbb-animation-duration-5x);
   --sbb-flip-card-summary-transition-delay: 0s;
-  --sbb-flip-card-details-min-height: fit-content;
+  --sbb-flip-card-details-min-height: var(--sbb-flip-card-details-scroll-height);
 
   ::slotted(sbb-flip-card-summary) {
     --sbb-flip-card-summary-opacity: 0;

diff --git a/src/elements/flip-card/flip-card/flip-card.ts b/src/elements/flip-card/flip-card/flip-card.ts
@@ -77,8 +77,13 @@ export class SbbFlipCardElement extends SbbHydrationMixin(LitElement) {
 
   /** Toggles the state of the sbb-flip-card. */
   public toggle(): void {
+    this.style?.setProperty(
+      '--sbb-flip-card-details-scroll-height',
+      `${this.details!.shadowRoot?.firstElementChild?.scrollHeight}px`,
+    );
     this._flipped = !this._flipped;
     this.toggleAttribute('data-flipped', this._flipped);
+    this.details!.toggleAttribute('data-flipped', this._flipped);
     this.summary!.inert = this._flipped;
     this.details!.inert = !this._flipped;
     this.flip.emit();