Add animations on transition

AppsWeekend · Dec 5, 2020 · 3f82e15 · 3f82e15
1 parent b5e71b9
commit 3f82e15
Showing 1 changed file with 41 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -1,10 +1,10 @@
 <html>
   <head>
     <title>OurShopTools - Useful tools for e-commerce</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css2?family=Nerko+One&display=swap" rel="stylesheet">
-
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link href="https://fonts.googleapis.com/css2?family=Nerko+One&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
     <meta name="description" content="Tools to take your commerce to the next level" />
     <meta property="og:title" content="OurShopTools - Useful tools for e-commerce" />
     <meta property="og:description" content="Tools to take your commerce to the next level" />
@@ -81,6 +81,10 @@
         display: none;
       }
 
+      section.active {
+        display: block;
+      }
+
       .text-icon {
         background: #fff;
         padding: 5px;
@@ -170,16 +174,45 @@ <h1>Please wait while we set things up...</h1>
     let domain = "";
     let email = "";
 
+    const animateCSS = (element, animation, prefix = 'animate__') => {
+      // We create a Promise and return it
+      new Promise((resolve, reject) => {
+        const animationName = `${prefix}${animation}`;
+        const node = document.querySelector(element);
+
+        node.classList.add(`${prefix}animated`, animationName);
+
+        // When the animation ends, we clean the classes and resolve the Promise
+        function handleAnimationEnd() {
+          node.classList.remove(`${prefix}animated`, animationName);
+          resolve('Animation ended');
+        }
+
+        node.addEventListener('animationend', handleAnimationEnd, {once: true});
+      });
+    }
+
     navigateTo = (page) => {
-      $("section", true).forEach(el => el.style.display = "none");
-      $(`#${page}`).style.display = "block";
+      const section = $("section.active");
+      if (section) {
+        section.classList.add('animate__animated', 'animate__fadeOut');
+        section.addEventListener('animationend', () => {
+          section.classList.remove('animate__animated', 'animate__fadeOut', 'active');
+          visibleSection = $(`#${page}`);
+          visibleSection.classList.add('animate__animated', 'animate__fadeIn', 'active');
+        });
+      } else {
+        visibleSection = $(`#${page}`);
+        visibleSection.classList.add('animate__animated', 'animate__fadeIn', 'active');
+      }
+
     }
 
     provisionStorefront = () => {
       xhr = new XMLHttpRequest();
 
-      xhr.addEventListener("load", () => {
-        const response = this.responseText;
+      xhr.addEventListener("load", (event) => {
+        const response = event.responseText;
         console.log(response);
       });