Added Animation for Navbar and Modal

stanleyowen · Mar 18, 2021 · 489e180 · 489e180
1 parent ebcdf91
commit 489e180
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 17 deletions.
diff --git a/client/src/App.css b/client/src/App.css
@@ -457,12 +457,10 @@ body.dark .btn-config .MuiButtonBase-root { color: #e7e7e7; }
 .modal {
     left: 0;
     top: 20px;
-    opacity: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
     position: fixed;
-    visibility: hidden;
     transition: all .5s;
     z-index: 90;
     background-color: rgba(255,255,255,0.5);
@@ -508,6 +506,9 @@ body.dark .btn-config .MuiButtonBase-root { color: #e7e7e7; }
     opacity: 0.7;
     text-decoration: none;
 }
+.showModal { animation: grow 0.3s ease-in forwards; }
+.closeModal { animation: shrink 0.3s ease-out forwards; }
+.hiddenModal { opacity: 0; visibility: hidden; }
 .modal__body { padding: 10px; text-decoration: none; }
 .modal__bodyImg {
     display: block;
@@ -763,16 +764,19 @@ input[type="checkbox"]:checked {
 @keyframes grow {
     from {
         opacity: 0;
+        visibility: hidden;
         transform: scale(0.8);
     }
     to {
         opacity: 1;
+        visibility: visible;
         transform: scale(1);
     }
 }
 @keyframes shrink {
     to {
         opacity: 0;
+        visibility: hidden;
         transform: scale(0.8);
     }
 }
@@ -909,6 +913,7 @@ input[type="checkbox"]:checked {
     .form__container { grid-template-columns: auto; }
     .footer__socialBtn { width: 75%; }
     .btn__outline { width: 50%; margin-top: 20px; }
+    .modal { top: 60px; }
 }
 @media only screen and (max-width: 600px) { .animation__message { width: 100%; height: auto; } .btn__outline { width: 65%; } }
 @media (max-width:500px){

diff --git a/client/src/App.min.css b/client/src/App.min.css
diff --git a/client/src/components/home.component.js b/client/src/components/home.component.js
@@ -92,8 +92,8 @@ const Home = () => {
         const modal = document.getElementById('addTodoModal');
         window.onclick = function(e){
             if(e.target === modal){
-                modal.style.visibility = "hidden";
-                modal.style.opacity = "0";
+                modal.classList.remove('showModal');
+                modal.classList.add('closeModal');
             }
         }
         document.querySelectorAll('[data-autoresize]').forEach(function (e) {
@@ -182,8 +182,8 @@ const Home = () => {
     const closeModal = (e) => {
         e.preventDefault();
         const modal = document.getElementById('addTodoModal');
-        modal.style.visibility = "hidden";
-        modal.style.opacity = "0";
+        modal.classList.remove('showModal');
+        modal.classList.add('closeModal');
     }
 
     const submitTodo = (e) => {
@@ -224,7 +224,7 @@ const Home = () => {
     return (
         <div className="main__projects" ref={wrapper}>
             <p>Hi, Welcome Back {email}</p>
-            <div id="addTodoModal" className="modal">
+            <div id="addTodoModal" className="modal hiddenModal">
                 <div className="modal__container">
                     <div className="modal__title">
                         <span className="modal__closeFireUI modal__closeBtn" onClick={closeModal}>&times;</span>

diff --git a/client/src/components/navbar.component.js b/client/src/components/navbar.component.js
@@ -71,8 +71,8 @@ const Navbar = () => {
         const modal = document.getElementById('changePasswordModal');
         window.onclick = function(e){
             if(e.target === modal){
-                modal.style.visibility = "hidden";
-                modal.style.opacity = "0";
+                modal.classList.remove('showModal');
+                modal.classList.add('closeModal');
             }
         }
         createRequest();
@@ -122,22 +122,24 @@ const Navbar = () => {
     const addTodo = (e) => {
         e.preventDefault();
         const modal = document.getElementById('addTodoModal');
-        modal.style.visibility = "visible";
-        modal.style.opacity = "1";
+        modal.classList.add('showModal');
+        modal.classList.remove('closeModal', 'hiddenModal');
     }
 
     const changePasswordModal = (e) => {
         e.preventDefault();
         const modal = document.getElementById('changePasswordModal');
-        modal.style.visibility = "visible";
-        modal.style.opacity = "1";
+        modal.classList.add('showModal');
+        modal.classList.remove('closeModal', 'hiddenModal');
+        document.getElementById("navbar__menu").style.display = "none";
+        document.getElementById("navbar-icon").classList.toggle("closeIcon");
     }
 
     const closeModal = (e) => {
         e.preventDefault();
         const modal = document.getElementById('changePasswordModal');
-        modal.style.visibility = "hidden";
-        modal.style.opacity = "0";
+        modal.classList.remove('showModal');
+        modal.classList.add('closeModal');
     }
 
     const toggleNavbar = (e) => {
@@ -219,7 +221,7 @@ const Navbar = () => {
                 ) : '' }
             </div>
 
-            <div id="changePasswordModal" className="modal">
+            <div id="changePasswordModal" className="modal hiddenModal">
                 <div className="modal__container">
                     <div className="modal__title">
                         <span className="modal__closeFireUI modal__closeBtn" onClick={closeModal}>&times;</span>