disappearing toast :(

scripts/toast/createtoast.js

@@ -1,3 +1,5 @@
+const removeToast = require('./removetoast');
+
 module.exports = (name, text, bg = '#a172a6', persistOnClick = false, time = 5, onclick = () => {}, selectable = false) => {
     if (!name || !text) {return;}
     if (!Array.isArray(text)) {text = [text];}
@@ -5,10 +7,15 @@ module.exports = (name, text, bg = '#a172a6', persistOnClick = false, time = 5,
     toast.className = 'toast';
     toast.style.backgroundColor = `${bg}c2`;
     toast.style.borderColor = `${bg}c2`;
+    toast.classList.add('toast-entering');
     toast.onmouseenter = () => {toast.style.backgroundColor = bg;};
     toast.onmouseleave = () => {toast.style.backgroundColor = `${bg}c2`;};
+    let continueTimeout = true;
     toast.onclick = () => {
-        if (!persistOnClick) {}
+        if (!persistOnClick) {
+            removeToast(toast);
+            continueTimeout = false;
+        }
         onclick();
     };
     document.getElementById('toast-container').appendChild(toast);
@@ -25,4 +32,5 @@ module.exports = (name, text, bg = '#a172a6', persistOnClick = false, time = 5,
         }
         else {toast.appendChild(document.createElement('br'));}
     }
+    setTimeout(() => {if (continueTimeout) {removeToast(toast);}}, time * 1000);
 };

scripts/toast/removetoast.js

@@ -0,0 +1,5 @@
+module.exports = (toast) => {
+    toast.classList.remove('toast-entering');
+    toast.classList.add('toast-leaving');
+    toast.onanimationend = () => {toast.remove();};
+};

styles/toast.css

@@ -8,6 +8,16 @@
         transform: translateX(0);
     }
 }
+@keyframes leave-toast {
+    to {
+        opacity: 0;
+        transform: translateX(100%);
+    }
+    from {
+        opacity: 100;
+        transform: translateX(0);
+    }
+}
 
 #toast-container {
     position: fixed;
@@ -39,6 +49,16 @@
     border-color: white;
 }
 
+.toast-entering {
+    animation: enter-toast .25s ease-out 1;
+    animation-fill-mode: both;
+}
+
+.toast-leaving {
+    animation: leave-toast .25s ease-out 1;
+    animation-fill-mode: both;
+}
+
 .toast p {
     font-family: 'Montserrat', sans-serif;
     margin: 8px;