v1.10.18 - Animações nos modais (logout e ajuda).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "igai",
-  "version": "1.10.17",
+  "version": "1.10.18",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

public/js/logoutModal.js

@@ -9,5 +9,10 @@ openLogoutModal.addEventListener("click", () => {
 });
 
 closeLogoutModal.addEventListener("click", () => {
-  logoutModal.close();
-});
+  logoutModal.classList.add("hide");
+  logoutModal.addEventListener("animationend", function () {
+    logoutModal.classList.remove("hide");
+    logoutModal.close();
+    logoutModal.removeEventListener("animationend", arguments.callee, false);
+  }, false)
+});

tailwind.css

@@ -110,6 +110,37 @@ footer img {
   filter: var(--bg-gray-50-shadow-filter);
 }
 
+dialog[open] {
+  animation: show .5s ease normal;
+}
+
+dialog[open]::backdrop {
+  animation: show 0.25s ease normal;
+}
+
+dialog.hide {
+  animation: hide .25s ease normal;
+}
+
+dialog.hide::backdrop {
+  animation: hide 0.5s ease normal;
+}
+
+@keyframes show {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes hide {
+  to {
+    opacity: 0;
+  }
+}
+
 .card {
   @apply flex justify-center mx-auto py-8;
 }

views/partials/ajuda.ejs

@@ -74,7 +74,12 @@
     helpModal.showModal();
   });
   helpModalClose.addEventListener("click", () => {
-    helpModal.close();
+    helpModal.classList.add("hide");
+    helpModal.addEventListener("animationend", function () {
+      helpModal.classList.remove("hide");
+      helpModal.close();
+      helpModal.removeEventListener("animationend", arguments.callee, false);
+    }, false)
   });
 
   let activeSlide = 1;