Fix: Firefox transition bugs

src/comp/toast/toast.svelte

@@ -3,6 +3,8 @@
   import Tablericon from "$comp/tablericon.svelte";
   import { removeToast } from "$lib/memory/toast";
   import { onMount } from "svelte";
+  import { backOut, cubicOut, sineOut } from "svelte/easing";
+  import { tweened } from "svelte/motion";
 
   /**
    * @type {import("$lib/memory/toast").Toast}
@@ -28,11 +30,51 @@
   /** @type {boolean | null} */
   let inserted = null;
 
+  $: expand, (() => {
+    if (!element) return;
+
+    if (expand) {
+      show();
+    } else {
+      hide();
+    }
+  })();
+
   onMount(() => {
     height = element.getBoundingClientRect().height;
 
     inserted = true;
   });
+
+  /** @type {import("svelte/motion").Tweened<number>} */
+  var valueTween = createTween(0.0);
+
+  /**
+   * @param {number} start
+   * @returns {import("svelte/motion").Tweened<number>}
+   */
+  function createTween(start) {
+    return tweened(start, {
+      duration: 200,
+      easing: cubicOut,
+    });
+  }
+
+  /**
+   * @param {number} goal
+   * @returns {Promise<void>}
+   */
+  async function runTween(goal) {
+    await valueTween.set(goal);
+  }
+
+  export async function show() {
+    await runTween(1.0);
+  }
+
+  export async function hide() {
+    await runTween(0.0);
+  }
 </script>
 
 <style lang="scss">
@@ -51,27 +93,35 @@
     border-radius: 16px;
     outline: 2px solid var(--background);
 
-    --translate-y: 0%;
+    --max-height: 1.0;
+    --translate-y: 0.0;
     --scale: 1.0;
     --opacity: 0.0;
+    --value-tween: 0.0;
+    --value-tween-q: calc(1.0 - var(--value-tween));
 
-    transform: translateY(var(--translate-y)) scale(var(--scale));
+    --solved-max-height: min(var(--height), calc(var(--height-tween) + var(--max-height) * var(--height)));
-    opacity: var(--opacity);
+    max-height: var(--solved-max-height);
+    --solved-translate-y: calc(var(--solved-max-height) * (var(--translate-y) * var(--value-tween-q)));
+    --solved-scale: calc(var(--scale) * var(--value-tween-q) + var(--value-tween));
+    transform: translateY(var(--solved-translate-y)) scale(var(--solved-scale));
+    --solved-opacity: calc(var(--opacity) * (1 - var(--value-tween)) + var(--value-tween));
+    opacity: var(--solved-opacity);
 
     @keyframes appear {
       0% {
         opacity: 0.0;
-        transform: translateY(calc(var(--translate-y) + 50px)) scale(var(--scale));
+        transform: translateY(calc(var(--solved-translate-y) + 50px)) scale(var(--solved-scale));
       }
       100% {
-        opacity: var(--opacity);
+        opacity: var(--solved-opacity);
-        transform: translateY(var(--translate-y)) scale(var(--scale));
+        transform: translateY(var(--solved-translate-y)) scale(var(--solved-scale));
       }
     }
 
     @keyframes dismiss {
       0% {
-        opacity: var(--opacity);
+        opacity: var(--solved-opacity);
       }
       100% {
         opacity: 0.0;
@@ -84,52 +134,38 @@
       position: relative;
 
       &:nth-last-child(1) {
-        z-index: 0;
+        z-index: 3;
-        --translate-y: 0%;
+        --translate-y: 0.0;
         --scale: 1.0;
         --opacity: 1.0;
-        transform: translateY(0%) scale(1.0);
-        transition: 0.2s ease-out;
       }
 
       &:nth-last-child(2) {
-        z-index: -1;
+        z-index: 2;
-        --translate-y: 90%;
+        --translate-y: 0.9;
         --scale: 0.9;
         --opacity: 0.8;
-        transform: translateY(90%) scale(0.9);
-        transition: 0.2s ease-out;
       }
 
       &:nth-last-child(3) {
-        z-index: -2;
+        z-index: 1;
-        --translate-y: 190%;
+        --translate-y: 1.9;
         --scale: 0.8;
         --opacity: 0.6;
-        transform: translateY(190%) scale(0.8);
-        transition: 0.2s ease-out;
       }
 
-      &:not([data-expand]):nth-last-child(n+4) {
+      &:nth-last-child(n+4) {
-        max-height: 0;
+        --max-height: 0.0;
-        opacity: 0;
+        --translate-y: 4.0;
-        --translate-y: 300%;
         --scale: 0.7;
         --opacity: 0.0;
-        transform: translateY(300%) scale(0.7);
       }
 
-      &[data-expand]:nth-child(n+0) {
+      &[data-expand] {
-        max-height: var(--height);
+        &:nth-last-child(n+0) {
           position: relative;
-        transform: unset;
-        opacity: 1.0;
           left: 0;
-        opacity: 1;
+        }
-        --translate-y: 0%;
-        --opacity: 1.0;
-        --scale: 1.0;
-        transition: 0.2s ease-out;
       }
     }
 
@@ -178,7 +214,7 @@
   }
 </style>
 
-<button class="toast" bind:this={element} style="--height: {height}px; --duration: {(toast.timeout ?? 100000000) / 1000 - 2}s;" data-expand={expand ? true : null} data-inserted={inserted} data-type={toast.type} on:click={() => removeToast(id)}>
+<button class="toast" bind:this={element} style="--height: {height}px; --duration: {(toast.timeout ?? 100000000) / 1000 - 2}s; --value-tween: {$valueTween}; --height-tween: {$valueTween * height}px" data-expand={expand ? true : null} data-inserted={inserted} data-type={toast.type} on:click={() => removeToast(id)}>
   <Glowfx borderRadius={16}>
     <div class="content">
       {#if toast.timeout}

src/routes/+layout.svelte

@@ -7,7 +7,7 @@
   $: {
     if ($page.form) {
       runIfError($page.form, (error) => {
-        addToast('error', error.title, error.msg, 10000);
+        addToast('error', error.title, error.msg, 15000);
       });
     }
   };