Add animations when the element appears and disappears

Author: dtdesign

ts/WoltLabSuite/Core/Component/Snackbar.ts

@@ -88,26 +88,44 @@ class Snackbar extends EventTarget {
 
   #setHideTimeout(): void {
     window.setTimeout(() => {
-      //this.hide();
-    }, 5000);
+      this.close();
+    }, 3_000);
   }
 
   isProgress(): boolean {
     return this.#type == SnackbarType.Progress;
   }
 
   isVisible(): boolean {
-    return this.#snackbarElement.parentElement !== null;
+    if (this.#snackbarElement.parentElement === null) {
+      return false;
+    }
+
+    if (this.#snackbarElement.classList.contains("snackbar--closing")) {
+      return false;
+    }
+
+    return true;
   }
 
   close(): void {
     if (!this.isVisible()) {
       return;
     }
 
-    this.#snackbarElement.remove();
-
     this.dispatchEvent(new CustomEvent("close"));
+
+    // The animation to move the element vertically relative to its height
+    // requires the value to be computed first.
+    const height = Math.trunc(
+      getSnackbarContainer().getGapValue() + this.#snackbarElement.getBoundingClientRect().height,
+    );
+    this.#snackbarElement.style.setProperty("--height", `${height}px`);
+
+    this.#snackbarElement.classList.add("snackbar--closing");
+    this.#snackbarElement.addEventListener("animationend", () => {
+      this.#snackbarElement.remove();
+    });
   }
 
   get element(): HTMLElement {
@@ -166,6 +184,16 @@ class SnackbarContainer {
       }
     });
   }
+
+  getGapValue(): number {
+    const gap = window.getComputedStyle(this.#element).gap;
+    const match = gap.match(/^(\d+)px$/);
+    if (match === null) {
+      return 0;
+    }
+
+    return parseInt(match[1]);
+  }
 }
 
 export function showSuccessSnackbar(message: string): Snackbar {

wcfsetup/install/files/js/WoltLabSuite/Core/Component/Snackbar.js

@@ -7,7 +7,45 @@
 	gap: 10px;
 }
 
+@keyframes snackbarIn {
+	0% {
+		opacity: 0;
+		transform: translateX(-100%);
+	}
+	50% {
+		opacity: 1;
+		transform: translateX(-50%);
+	}
+	100% {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+
+@keyframes snackbarOut {
+	0% {
+		opacity: 1;
+		transform: translateX(0);
+		margin-bottom: 0;
+	}
+	25% {
+		opacity: 1;
+		transform: translateX(-50%);
+	}
+	50% {
+		margin-bottom: 0;
+		opacity: 0;
+		transform: translateX(-100%);
+	}
+	100% {
+		margin-bottom: calc(var(--height) * -1);
+		opacity: 0;
+		transform: translateX(-100%);
+	}
+}
+
 .snackbar {
+	animation: snackbarIn 0.12s ease-in-out;
 	color: #fff;
 	background-color: rgb(50, 50, 50);
 	display: flex;
@@ -22,6 +60,11 @@
 	min-width: 200px;
 }
 
+.snackbar.snackbar--closing {
+	animation-name: snackbarOut;
+	animation-duration: .24s;
+}
+
 .snackbar__icon {
 	border-right: 2px solid transparent;
 	display: flex;