RanchiMall/floscout
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.0.7

Browse Source 
Added animation to tab switching
This commit is contained in:
sairaj mote 2020-05-17 18:57:21 +05:30
parent cb7af28eb2
commit 7350c6834e
4 changed files with 181 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
css/main.css
View File

@ -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;

2
css/main.css.map
View File

File diff suppressed because one or more lines are too long

42
css/main.scss
View File

@ -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;

53
index.html
View File

@ -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" data-target="token_transaction_container">Top Transactions</h4>
<h4 class="tab active" data-rank="1" data-target="token_balance_container">Top Balances</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" data-target="winners_container">Winners</h4>
<h4 class="tab active" data-rank="1" data-target="participant_container">Participants</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 => {
member.classList.add('hide-completely')
})
targetBody.classList.remove('hide-completely')
allTabs.forEach(thisTab => {
thisTab.classList.remove('active')
})
tab.classList.add('active')
if(!currentBody.isEqualNode(targetBody)){
if(activeTabRank < currentTabRank){
targetBody.classList.add('fly-in-from-right')
currentBody.classList.add('fly-out-to-left')
}
else{
targetBody.classList.add('fly-in-from-left')
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')