modal: change transition

now a simple fade-in/fade-out, which is part of tailwind.config.js rather than modal.css.
hrfee · Jan 30, 2022 · ecbff16 · ecbff16
1 parent baffa4a
commit ecbff16
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 18 deletions.
diff --git a/css/modal.css b/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;

diff --git a/package-lock.json b/package-lock.json
diff --git a/tailwind.config.js b/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,

diff --git a/ts/modules/modal.ts b/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('modal-hiding');
+            modal.classList.remove('block');
+            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();