Merge pull request #63 from maria-moroz/bugfix/footer-modal-animation

finish

src/js/footerModalOpen.js

@@ -30,15 +30,18 @@ function openModal() {
 function closeModal() {
   refs.modal.classList.add('footer__backdrop--hidden');
   refs.bodyScroll.classList.remove('is-open');
-  document.removeEventListener('keydown', eventKeydown);
-  refs.modal.classList.remove('modal-bg');
-  array.map(item => {
-    item.classList.add('big');
-    item.style.opacity = '0';
-  });
-  refs.overlay.style.opacity = '1';
   refs.modal.classList.remove('modal-bg');
+
+  setTimeout(showOverlay, 1000);
+  setTimeout(() => {
+    array.map(item => {
+      item.classList.add('big');
+      item.style.opacity = '0';
+    });
+  }, 1000);
+
   refs.closeModalBtn.removeEventListener('click', closeModal);
+  document.removeEventListener('keydown', eventKeydown);
 }
 
 function eventKeydown(event) {
@@ -53,6 +56,10 @@ function hideOverlay() {
   refs.overlay.style.opacity = '0';
 }
 
+function showOverlay() {
+  refs.overlay.style.opacity = '1';
+}
+
 function toggleBackground() {
   refs.modal.classList.add('modal-bg');
 }

src/sass/_footer-modal.scss

@@ -23,6 +23,8 @@
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
+  transition: opacity 250ms linear, visibility 250ms linear;
+
 }
 
 .overlay {
@@ -69,6 +71,7 @@
     background-color: #fff;
     position: relative;
     margin: 0 auto;
+  transition: transform 250ms linear;
 
     @media screen and (max-width: 767px) {
       max-width: 450px;
@@ -89,7 +92,7 @@
   }
 
   .footer__backdrop--hidden & {
-    transform: translate(-50%, -50%) scale(1.5);
+    transform: translate(-50%, -50%) scale(0.5);
   }
 }