modal: change transition

now a simple fade-in/fade-out, which is part of tailwind.config.js
rather than modal.css.

css/modal.css

@@ -10,19 +10,6 @@
     background-color: rgba(0,0,0,40%);
 }
 
-.modal-shown {
-    display: block;
-}
-
-@keyframes modal-hide {
-    from { opacity: 1; }
-    to { opacity: 0; }
-}
-
-.modal-hiding {
-    animation: modal-hide 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
 .modal-close {
     float: right;
     color: #aaa;

package-lock.json

@@ -10165,6 +10165,7 @@
     },
     "nightwind": {
       "version": "git+ssh://git@github.com/yonson2/nightwind.git#755e4b34e0cd782291822b88ad969c69404900da",
+      "integrity": "sha512-eibdkEdOFtBj/1iTk3W0CP9+GXwW1OXcoLBm+Pf7Sq5JLRmailuhaxGrKlNjZH9Wn8yYPO+LuYHg3NMG27Gjuw==",
       "from": "nightwind@github:yonson2/nightwind",
       "requires": {}
     },

tailwind.config.js

@@ -6,6 +6,28 @@ module.exports = {
   darkMode: 'class',
   theme: {
       extend: {
+          keyframes: {
+              'fade-in': {
+                  '0%': {
+                      opacity: '0'
+                  },
+                  '100%': {
+                      opacity: '1'
+                  }
+              },
+              'fade-out': {
+                  '0%': {
+                      opacity: '1'
+                  },
+                  '100%': {
+                      opacity: '0'
+                  }
+              },
+          },
+          animation: {
+              'fade-in': 'fade-in 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+              'fade-out': 'fade-out 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)'
+          },
           colors: {
               neutral: colors.slate,
               positive: colors.green,

ts/modules/modal.ts

@@ -24,11 +24,12 @@ export class Modal implements Modal {
         if (event) {
             event.preventDefault();
         }
-        this.modal.classList.add('modal-hiding');
+        this.modal.classList.add('animate-fade-out');
+        this.modal.classList.remove("animate-fade-in");
         const modal = this.modal;
         const listenerFunc = () => {
-            modal.classList.remove('modal-shown');
+            modal.classList.remove('block');
-            modal.classList.remove('modal-hiding');
+            modal.classList.remove('animate-fade-out');
             modal.removeEventListener(window.animationEvent, listenerFunc);
             document.dispatchEvent(this.closeEvent);
         };
@@ -43,11 +44,11 @@ export class Modal implements Modal {
     }
 
     show = () => {
-        this.modal.classList.add('modal-shown');
+        this.modal.classList.add('block', 'animate-fade-in');
         document.dispatchEvent(this.openEvent);
     }
     toggle = () => {
-        if (this.modal.classList.contains('modal-shown')) {
+        if (this.modal.classList.contains('animate-fade-in')) {
             this.close();
         } else {
             this.show();