feat: added support for css animations

Alexandrshy · Jun 27, 2020 · ab3a38b · ab3a38b
1 parent 846e214
commit ab3a38b
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -57,9 +57,9 @@ Keukenhof.init();
 
 * Add callbacks `onOpen`, `onClose`, `beforeOpen`, `beforeClose`
 * Add optional focus control inside the modal window
-* Add support for CSS animations
 * Add accessibility support
 * Write documentation
+* ~~Add support for CSS animations~~
 * ~~Add optional scroll lock~~
 * ~~Add a dev server for local development~~
 

diff --git a/example/script.js b/example/script.js
@@ -1 +1,3 @@
-Keukenhof.init();
+Keukenhof.init({
+    hasAnimation: true,
+});
diff --git a/example/style.css b/example/style.css
@@ -4,6 +4,7 @@
   --pink-swan: #c3bbbb;
   --white-rgba: rgba(255, 255, 255, 0.6);
   --gallery-rgba: rgba(238, 238, 238, 0.4);
+  --animation: cubic-bezier(0.66, 0.28, 0.09, 0.53);
 }
 
 body {
@@ -26,6 +27,22 @@ img {
   display: block;
 }
 
+.modal.isOpening {
+  animation: fadeIn .35s var(--animation);
+}
+
+.modal.isOpening .modal__container {
+  animation: downUp .35s var(--animation);
+}
+
+.modal.isClosing {
+  animation: fadeOut .35s var(--animation);
+}
+
+.modal.isClosing .modal__container {
+  animation: centerUp .35s var(--animation);
+}
+
 .modal__button {
   margin: 150px 0;
   padding: 15px 40px;
@@ -94,3 +111,43 @@ img {
   margin: 0 0 25px;
   line-height: 1.65;
 }
+
+@keyframes downUp {
+  0% {
+    transform: translateY(8%);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes centerUp {
+  0% {
+    transform: translateY(0);
+  }
+
+  100% {
+    transform: translateY(-8%);
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
diff --git a/src/consts.ts b/src/consts.ts
@@ -7,3 +7,8 @@ export const SCROLL_STATE = {
     DISABLE: 'disable',
     ENABLE: 'enable',
 } as const;
+
+export const CLASS_NAMES = {
+    IS_OPENING: 'isOpening',
+    IS_CLOSING: 'isClosing',
+} as const;
diff --git a/src/index.ts b/src/index.ts
@@ -1,5 +1,5 @@
 import {ConfigType, ModalType, KeukenhofType} from './types';
-import {ATTRIBUTES, SCROLL_STATE} from './consts';
+import {ATTRIBUTES, SCROLL_STATE, CLASS_NAMES} from './consts';
 
 export const Keukenhof = ((): KeukenhofType => {
     /**
@@ -10,6 +10,7 @@ export const Keukenhof = ((): KeukenhofType => {
         openAttribute: string;
         closeAttribute: string;
         openClass: string;
+        hasAnimation: boolean;
         scrollBehavior: {
             isDisabled: boolean;
             container: string;
@@ -27,12 +28,14 @@ export const Keukenhof = ((): KeukenhofType => {
             openAttribute = ATTRIBUTES.OPEN,
             closeAttribute = ATTRIBUTES.CLOSE,
             openClass = 'isOpen',
+            hasAnimation = false,
             scrollBehavior = {},
         }: ConfigType) {
             this.$modal = document.querySelector(selector);
             this.openAttribute = openAttribute;
             this.closeAttribute = closeAttribute;
             this.openClass = openClass;
+            this.hasAnimation = hasAnimation;
             this.scrollBehavior = {
                 isDisabled: true,
                 container: 'body',
@@ -63,15 +66,47 @@ export const Keukenhof = ((): KeukenhofType => {
             this.$modal?.classList.add(this.openClass);
             this.changeScrollBehavior(SCROLL_STATE.DISABLE);
             this.addEventListeners();
+            this.preparationOpeningModal();
+        }
+
+        /**
+         * Preparing a modal window for opening
+         */
+        preparationOpeningModal() {
+            if (this.hasAnimation) {
+                this.$modal?.classList.add(CLASS_NAMES.IS_OPENING);
+                const handler = () => {
+                    this.$modal?.classList.remove(CLASS_NAMES.IS_OPENING);
+                    this.$modal?.removeEventListener('animationend', handler);
+                };
+                this.$modal?.addEventListener('animationend', handler);
+            }
         }
 
         /**
          * Close modal window
          */
         close() {
-            this.$modal?.classList.remove(this.openClass);
             this.changeScrollBehavior(SCROLL_STATE.ENABLE);
             this.removeEventListeners();
+            this.preparationClosingModal();
+        }
+
+        /**
+         * Preparing a modal window for closing
+         */
+        preparationClosingModal() {
+            if (this.hasAnimation) {
+                this.$modal?.classList.add(CLASS_NAMES.IS_CLOSING);
+                const handler = () => {
+                    this.$modal?.classList.remove(CLASS_NAMES.IS_CLOSING);
+                    this.$modal?.classList.remove(this.openClass);
+                    this.$modal?.removeEventListener('animationend', handler);
+                };
+                this.$modal?.addEventListener('animationend', handler);
+            } else {
+                this.$modal?.classList.remove(this.openClass);
+            }
         }
 
         /**

diff --git a/src/types.ts b/src/types.ts
@@ -4,6 +4,7 @@ export type ConfigType = {
     openAttribute?: string;
     closeAttribute?: string;
     openClass?: string;
+    hasAnimation?: boolean;
     scrollBehavior?: {
         isDisabled?: boolean;
         container?: string;
@@ -16,6 +17,8 @@ export type ModalType = {
     close: (event?: Event) => void;
     removeEventListeners: () => void;
     closeBySelector: (selector: string) => void;
+    preparationOpeningModal: () => void;
+    preparationClosingModal: () => void;
 };
 
 export type KeukenhofType = {