v1.0.7

Added animation to tab switching

css/main.css

@@ -407,6 +407,104 @@ ul .balance:last-of-type {
   }
 }
 
+@-webkit-keyframes flyInRight {
+  from {
+    opacity: 0;
+    -webkit-transform: translateX(2rem);
+            transform: translateX(2rem);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+@keyframes flyInRight {
+  from {
+    opacity: 0;
+    -webkit-transform: translateX(2rem);
+            transform: translateX(2rem);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+@-webkit-keyframes flyOutLeft {
+  from {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translateX(-2rem);
+            transform: translateX(-2rem);
+  }
+}
+
+@keyframes flyOutLeft {
+  from {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translateX(-2rem);
+            transform: translateX(-2rem);
+  }
+}
+
+@-webkit-keyframes flyOutRight {
+  from {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translateX(2rem);
+            transform: translateX(2rem);
+  }
+}
+
+@keyframes flyOutRight {
+  from {
+    opacity: 1;
+    -webkit-transform: none;
+            transform: none;
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translateX(2rem);
+            transform: translateX(2rem);
+  }
+}
+
+.fly-in-from-left {
+  -webkit-animation: flyInLeft 0.3s forwards;
+          animation: flyInLeft 0.3s forwards;
+}
+
+.fly-in-from-right {
+  -webkit-animation: flyInRight 0.3s forwards;
+          animation: flyInRight 0.3s forwards;
+}
+
+.fly-out-to-left {
+  -webkit-animation: flyOutLeft 0.3s forwards;
+          animation: flyOutLeft 0.3s forwards;
+}
+
+.fly-out-to-right {
+  -webkit-animation: flyOutRight 0.3s forwards;
+          animation: flyOutRight 0.3s forwards;
+}
+
 #highlights {
   padding: 1.5rem 0;
   display: -ms-grid;

css/main.scss

@@ -288,6 +288,48 @@ ul{
         transform: none;
     }
 }
+@keyframes flyInRight{
+    from{
+        opacity: 0;
+        transform: translateX(2rem);
+    }
+    to{
+        opacity: 1;
+        transform: none;
+    }
+}
+@keyframes flyOutLeft{
+    from{
+        opacity: 1;
+        transform: none;
+    }
+    to{
+        opacity: 0;
+        transform: translateX(-2rem);
+    }
+}
+@keyframes flyOutRight{
+    from{
+        opacity: 1;
+        transform: none;
+    }
+    to{
+        opacity: 0;
+        transform: translateX(2rem);
+    }
+}
+.fly-in-from-left{
+    animation: flyInLeft 0.3s forwards;
+}
+.fly-in-from-right{
+    animation: flyInRight 0.3s forwards;
+}
+.fly-out-to-left{
+    animation: flyOutLeft 0.3s forwards;
+}
+.fly-out-to-right{
+    animation: flyOutRight 0.3s forwards;
+}
 #highlights{
     padding: 1.5rem 0;
     display: grid;

index.html

@@ -243,8 +243,8 @@
                     <h4 class="breakable">${incAddress}</h4>
                   </div> 
                   <div class="tabs">
-                      <h4 class="tab active" data-target="token_balance_container">Top Balances</h4>
+                      <h4 class="tab active" data-rank="1" data-target="token_balance_container">Top Balances</h4>
-                      <h4 class="tab" data-target="token_transaction_container">Top Transactions</h4>
+                      <h4 class="tab" data-rank="2" data-target="token_transaction_container">Top Transactions</h4>
                       <div class="line"></div>
                   </div>
                   <ul id="token_balance_container" data-tab-group="token" class="card">
@@ -292,8 +292,9 @@
                     <li>Narendra Modi Loses</li>
                 </ul>
                 <div class="tabs">
-                    <h4 class="tab active" data-target="participant_container">Participants</h4>
+                    <h4 class="tab active" data-rank="1" data-target="participant_container">Participants</h4>
-                    <h4 class="tab" data-target="winners_container">Winners</h4>
+                    <h4 class="tab" data-rank="2" data-target="winners_container">Winners</h4>
+                    <h4 class="tab" data-rank="3" data-target="losers_container">losers</h4>
                     <div class="line"></div>
                 </div>
                 <ul id="participant_container" data-tab-group="token" class="card">
@@ -314,6 +315,13 @@
                         <h4>0.0000023333 RMT</h4>
                     </li>
                 </ul>
+                <ul id="losers_container" data-tab-group="token" class="card hide-completely">
+                    <li class="contract-choice winner" >
+                        <h5 class="breakable label">F6EMAHjivqrcrdAHNABq2R1FLNkx8xfEaT</h5>
+                        <h3>narendra modi wins</h3>
+                        <h4>0.0000023333 RMT</h4>
+                    </li>
+                </ul>
                 `
                 return page;
             },
@@ -638,18 +646,37 @@
 
         function showTab(tab){
             let targetTab = tab.getAttribute('data-target'),
+                activeTabRank = parseInt(tab.parentNode.querySelector('.active').dataset.rank),
+                currentTabRank = parseInt(tab.dataset.rank),
+                currentBody = document.getElementById(tab.parentNode.querySelector('.active').dataset.target),
                 targetBody = document.getElementById(targetTab),
-                targetGroup = targetBody.getAttribute('data-tab-group'),
+                targetGroup = targetBody.dataset.tabGroup,
                 tabGroupMembers = document.querySelectorAll(`[data-tab-group = '${targetGroup}']`),
                 allTabs = tab.parentNode.querySelectorAll('.tab')
-            tabGroupMembers.forEach(member => {
+            if(!currentBody.isEqualNode(targetBody)){
-                member.classList.add('hide-completely')
+                if(activeTabRank < currentTabRank){
-            })
+                    targetBody.classList.add('fly-in-from-right')
-            targetBody.classList.remove('hide-completely')
+                    currentBody.classList.add('fly-out-to-left')
-            allTabs.forEach(thisTab => {
+                }
-                thisTab.classList.remove('active')
+                else{
-            })
+                    targetBody.classList.add('fly-in-from-left')
-            tab.classList.add('active')
+                    currentBody.classList.add('fly-out-to-right')
+                }
+                setTimeout(() => {
+                    tabGroupMembers.forEach(member => {
+                        member.classList.add('hide-completely')
+                    })
+                    targetBody.classList.remove('hide-completely')
+                    currentBody.classList.remove('fly-out-to-right', 'fly-out-to-left')
+                },300)
+                setTimeout(() => {
+                    targetBody.classList.remove('fly-in-from-right', 'fly-in-from-left')
+                },600)
+                allTabs.forEach(thisTab => {
+                    thisTab.classList.remove('active')
+                })
+                tab.classList.add('active')
+            }
         }
 
         let loader = document.getElementById('loader_page')