smooth animations for homeservers

This commit is contained in:
b1ek 2023-08-23 22:46:27 +10:00
parent 01e5016495
commit 93bfb95f6a
Signed by: blek
GPG Key ID: 14546221E3595D0C
2 changed files with 41 additions and 4 deletions

View File

@ -8,10 +8,27 @@
let list = [];
let loaded = false;
let loaded_fade_anim = false;
let list_fade_anim = false;
// load servers
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>
@ -29,14 +46,14 @@
</p>
<div class={style.list}>
{#if !loaded}
<p>
<p class={loaded_fade_anim ? style.fade_out : ''}>
Loading...<br/>
<Jumper color='#e1e1e1' duration='3s' />
</p>
{/if}
{#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>
<tr>
<td class={style.server}>

View File

@ -3,6 +3,26 @@
font-size: 20pt;
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 {
margin-top: 60px;
text-align: center;