smooth animations for homeservers
This commit is contained in:
parent
01e5016495
commit
93bfb95f6a
|
@ -8,10 +8,27 @@
|
||||||
let list = [];
|
let list = [];
|
||||||
let loaded = false;
|
let loaded = false;
|
||||||
|
|
||||||
|
let loaded_fade_anim = false;
|
||||||
|
let list_fade_anim = false;
|
||||||
|
|
||||||
// load servers
|
// load servers
|
||||||
invoke('list_servers').then((data: any) => {
|
invoke('list_servers').then((data: any) => {
|
||||||
list = data;
|
|
||||||
loaded = true;
|
loaded_fade_anim = true;
|
||||||
|
|
||||||
|
// wait for animation to end
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
|
||||||
|
loaded_fade_anim = false;
|
||||||
|
loaded = true;
|
||||||
|
list = data;
|
||||||
|
list_fade_anim = true;
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
list_fade_anim = false;
|
||||||
|
}, 1490)
|
||||||
|
}, 1490);
|
||||||
})
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
@ -29,14 +46,14 @@
|
||||||
</p>
|
</p>
|
||||||
<div class={style.list}>
|
<div class={style.list}>
|
||||||
{#if !loaded}
|
{#if !loaded}
|
||||||
<p>
|
<p class={loaded_fade_anim ? style.fade_out : ''}>
|
||||||
Loading...<br/>
|
Loading...<br/>
|
||||||
<Jumper color='#e1e1e1' duration='3s' />
|
<Jumper color='#e1e1e1' duration='3s' />
|
||||||
</p>
|
</p>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if loaded}
|
{#if loaded}
|
||||||
<table style='margin:0 auto;min-width:100%'>
|
<table style='margin:0 auto;min-width:100%' class={list_fade_anim ? style.fade_in : ''}>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td class={style.server}>
|
<td class={style.server}>
|
||||||
|
|
|
@ -3,6 +3,26 @@
|
||||||
font-size: 20pt;
|
font-size: 20pt;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes fadeout {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 0;
|
||||||
|
position: relative;
|
||||||
|
top: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade_out {
|
||||||
|
animation: fadeout 1.5s ease;
|
||||||
|
}
|
||||||
|
.fade_in {
|
||||||
|
animation: fadeout 1.5s ease reverse;
|
||||||
|
}
|
||||||
.list {
|
.list {
|
||||||
margin-top: 60px;
|
margin-top: 60px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
Loading…
Reference in New Issue