From dac84ce40e3785afd828bf14669f54650a8d2561 Mon Sep 17 00:00:00 2001
From: Tommaso Menga <tommaso.menga-94@hotmail.it>
Date: Wed, 24 Jul 2024 12:01:44 +0200
Subject: [PATCH] fix(sbb-overlay): add background animation (#2945)

---
 src/elements/overlay/overlay.scss | 48 +++++++++++++++++++++++--------
 src/elements/overlay/overlay.ts   | 10 +++----
 2 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/src/elements/overlay/overlay.scss b/src/elements/overlay/overlay.scss
index 1e4cececa0..b327122f05 100644
--- a/src/elements/overlay/overlay.scss
+++ b/src/elements/overlay/overlay.scss
@@ -18,8 +18,6 @@
   );
   --sbb-overlay-animation-easing: ease;
   --sbb-overlay-pointer-events: none;
-  --sbb-overlay-content-transition: transform var(--sbb-overlay-animation-duration)
-    var(--sbb-overlay-animation-easing);
 
   display: block;
   position: fixed;
@@ -50,14 +48,27 @@
 .sbb-overlay__container {
   background-color: var(--sbb-overlay-background-color);
   pointer-events: var(--sbb-overlay-pointer-events);
-  display: flex;
+  display: none;
   align-items: center;
   position: fixed;
   inset: var(--sbb-overlay-inset);
+
+  :host([data-state]:not([data-state='closed'])) & {
+    display: flex;
+    animation: {
+      name: open;
+      duration: var(--sbb-overlay-animation-duration);
+      timing-function: var(--sbb-overlay-animation-easing);
+    }
+  }
+
+  :host([data-state][data-state='closing']) & {
+    pointer-events: none;
+    animation-name: close;
+  }
 }
 
 .sbb-overlay {
-  display: none;
   position: absolute;
   inset-inline: 0;
   margin: auto;
@@ -68,18 +79,15 @@
   color: var(--sbb-overlay-color);
 
   :host([data-state]:not([data-state='closed'])) & {
-    display: block;
-
     animation: {
-      name: open;
+      name: open-move-in;
       duration: var(--sbb-overlay-animation-duration);
-      timing-function: ease;
+      timing-function: var(--sbb-overlay-animation-easing);
     }
   }
 
   :host([data-state][data-state='closing']) & {
-    pointer-events: none;
-    animation-name: close;
+    animation-name: close-move-out;
   }
 }
 
@@ -137,11 +145,19 @@
 @keyframes open {
   from {
     opacity: 0;
-    transform: translateY(var(--sbb-spacing-fixed-4x));
   }
 
   to {
     opacity: 1;
+  }
+}
+
+@keyframes open-move-in {
+  from {
+    transform: translateY(var(--sbb-spacing-fixed-4x));
+  }
+
+  to {
     transform: translateY(0%);
   }
 }
@@ -149,11 +165,19 @@
 @keyframes close {
   from {
     opacity: 1;
-    transform: translateY(0%);
   }
 
   to {
     opacity: 0;
+  }
+}
+
+@keyframes close-move-out {
+  from {
+    transform: translateY(0%);
+  }
+
+  to {
     transform: translateY(var(--sbb-spacing-fixed-4x));
   }
 }
diff --git a/src/elements/overlay/overlay.ts b/src/elements/overlay/overlay.ts
index 740d01e577..385c8a29ba 100644
--- a/src/elements/overlay/overlay.ts
+++ b/src/elements/overlay/overlay.ts
@@ -165,11 +165,11 @@ export class SbbOverlayElement extends SbbOverlayBaseElement {
     /* eslint-enable lit/binding-positions */
 
     return html`
-      <div class="sbb-overlay__container">
-        <div
-          @animationend=${(event: AnimationEvent) => this.onOverlayAnimationEnd(event)}
-          class="sbb-overlay"
-        >
+      <div
+        class="sbb-overlay__container"
+        @animationend=${(event: AnimationEvent) => this.onOverlayAnimationEnd(event)}
+      >
+        <div class="sbb-overlay">
           <div
             @click=${(event: Event) => this.closeOnSbbOverlayCloseClick(event)}
             class="sbb-overlay__wrapper"