Weer dialooganimatie toegevoegd

Author: klascal

schedule.js

@@ -994,9 +994,13 @@ function hideDialog(el) {
   if (el) {
     dialog = document.getElementById(el);
   }
-  dialog.style = "animation: none";
-  dialog.close();
-  show("submenus", "Instellingen");
+  dialog.style = "animation: popOut 0.33s";
+  dialog.addEventListener("animationend", (event) => {
+    if (event.animationName === "popOut") {
+      dialog.close();
+      show("submenus", "Instellingen");
+    }
+  });
   handleFormSubmit();
 }
 
@@ -1031,6 +1035,9 @@ if (localStorage.getItem("css")) {
 }
 document.getElementById("weekBtn").addEventListener("click", () => {
   localStorage.setItem("dag", "false");
+  if (!document.startViewTransition) {
+    document.getElementById("schedule").innerText = "";
+  }
   handleFormSubmit();
 });
 document.getElementById("dayBtn").addEventListener("click", () => {

style.css

@@ -117,6 +117,21 @@ dialog {
   }
 }
 
+@keyframes popOut {
+  from {
+    max-height: calc(100vh - 80px);
+    padding: 24px;
+    opacity: 1;
+    overflow: hidden;
+  }
+  to {
+    max-height: 0px;
+    padding: 0;
+    opacity: 0;
+    overflow: hidden;
+  }
+}
+
 #inputForm {
   max-width: 400px;
   margin: 0 auto;